Всегда ли декоратору @Component Angular 2 всегда нужен селектор имени элемента?
В этом примере из официальных документов Angular 2 декоратор выглядит так:
@Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
Пример: предпочел бы, чтобы мой HTML-код не был завален нестандартными элементами, и предпочел бы что-то вроде (NB: ng-angular
это только пример, который я хотел бы видеть):
import { Component } from '@angular/core';
@Component({
template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }
и использовал что-то вроде этого:
<div ng-component="List"</div>
Или такой компонентный декоратор используется только тогда, когда вы хотите создать новый HTML-элемент, а затем придерживаться простого Listcontroller
для div
в моем примере выше?
3 ответа
Селектор не всегда нужен, например. у вас есть верхний компонент модуля, который загружается маршрутизатором и отображается в
Селектор необходим для любого другого типа компонента. в противном случае angular не будет знать, какой компонент он должен отображать.
Я не слышал об атрибуте "ng-component"
[РЕДАКТИРОВАТЬ]комплект эффективно ответил правильно в своем первом комментарии:
Вы должны создать элемент, который будет включать ваш шаблон, однако это не обязательно должен быть новый HTML-элемент, потому что селектор может быть элементом, [атрибутом] или классом, например.
<div test>
может быть элементом для компонента с селектором: '[test]'
Просто для уточнения: селектор может быть стандартным CSS-селектором, поэтому ваш HTML может быть не угловым.
Пример:
@Component({
selector: 'div.player-list',
...
})
export class PlayerList {
}
будет соответствовать <div class="player-list and-possibly-some-other-classes">...</div>
(т.е. замена div с вашим угловым шаблоном)
Компонент - это новый элемент HTML, что-то вроде <my-component>Hello</my-component>
,
Я думаю, что вы хотите, это директива.
Директива Attribute изменяет внешний вид или поведение элемента DOM.
Таким образом, вы можете сделать что-то вроде <div makeItBlue>Blue stuff</div>