Angular 2 входных параметра в корневой директиве

Этот пример показывает, как использовать аннотацию @Input() для дочерних компонентов. Мой вопрос: как вы используете его на корневом компоненте? Например, если вы изменили код по ссылке выше:

@Component({
selector: 'app',
template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
`,
directives: [BankAccount]
})
class App {
    @Input() something: string;
}

bootstrap(App);

И в html:

<app something="Test"></app>

Приведенный выше пример никогда не обновляет что-то свойство в компоненте App.

Ответ 1

Этот комментарий Тобиаса Боша имеет ответ на ваш вопрос:

Причина, по которой это не работает, заключается в том, что ваш index.html, в который вы помещаете <app something="Test"></app>, не является компонентом angular. Из-за этого angular не будет компилировать этот элемент. И angular не считывает значения атрибутов во время выполнения, только во время компиляции, так как в противном случае мы получили бы удар производительности.

Итак, в данный момент вы не можете использовать входные параметры для корневого элемента.

Ответ 2

Я думаю, вы все еще можете использовать:

class App {
    constructor(elm: ElementRef) {
        this.something = elm.nativeElement.getAttribute('something'); 
    }
}