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

Селекторы

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