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

Селекторы

Селектор компонента находится в метаинформации @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"

Источник – курс «Angular 5 the complete guide», Maximilian Schwarzmüller
Редактировать на GitHub