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