Всегда ли декоратору @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>

Другие вопросы по тегам