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

Question

В этом примере показано, как использовать аннотацию @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.

Answer 1

На этот комментарий Тобиаса Босха есть ответ на ваш вопрос:

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

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

Answer 2

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

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