меню

Селекторы

Селектор компонента находится в метаинформации @Component в файле *.component.ts.

Он работает так же как и css селекторы:

  • selector: 'app-servers' - элемент
  • selector: '.app-servers' - класс
  • selector: '[app-servers]' - data атрибут

В шалоне должно быть соответственно:

	
<app-servers></app-servers>
<div class='app-servers'></div>
<div app-servers></div>
	

Databinding

Датабиндинг (Databinding, связывание данных) - это коммуникация между TypeScript (бизнес логикой) и шаблоном (html).

Строковая интерполяция

app\server\server.component.ts:

	
export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';
}
	

Возможность указать тип переменной - особенность TypeScript, это не обязательно делать всегда.

app\server\server.component.html:

	
{{ 'Server' }} id is {{serverId}} and status is {{ serverStatus }}
	

{{ 'Server' }}, {{serverId}}, {{ serverStatus }} - будут интерполированы в строки.

Интерполяция функции

app\server\server.component.ts:

	
getServerID() {
    return this.serverId;
}
	

app\server\server.component.html:

	
{{ getServerID() }}
	

Property Binding (Связывание свойств)

Добавим в компонент \app\servers\servers.component.ts переменную disallowNewServer и конструктор:

	
export class ServersComponent implements OnInit {
  allowNewServer = false;
  constructor() {
    setTimeout(
    () => {
      this.allowNewServer = true;
    }, 
    2000);
  }
  ngOnInit() {
  }
}
	

Стрелочный синтаксис () => {} позволяет использовать внешний this, так как не создает свой собственный.

В шаблоне \app\servers\servers.component.html:

	
<button class="btn btn-primary" [disabled]="!allowNewServer">Add Server</button>
	

[disabled]="!allowNewServer" Связывает атрибут disabled с переменной компонента allowNewServer. Символ ! Инвертирует булевое значение.

Связывание свойств и строковая интерполяция

Вывод текста в шаблоне: {{ variable }}

Вывод html свойства: [innerText]="variable"


Возможно, вам будет интересно

Компонент и данные

В данном руководстве пойдет речь о селекторе, Databinding, интерполяции, связывание свойств и многом другом.

Компонент и модель

Angilar создание обычных и вложенных компонентов через CLI. Описание модели.

Route Resolving

Разрешение динамических данных перед активацией роута и интерфейс Resolve в Angular

Установка и первый запуск Angular

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту