Eckige 2 Eingabeparameter für die root-Direktive

Question

This Beispiel zeigt, wie @Input() Annotation für untergeordnete Komponenten verwendet wird. Meine Frage ist, wie verwenden Sie es auf Root-Komponente? Zum Beispiel, wenn Sie Code auf dem Link ändern oben:

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

bootstrap(App); 

Und in html:

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

Das obige Beispiel nie aktualisiert etwas Eigenschaft auf App-Komponente.

Answer 1

This Tobias Bosch's comment hat auf Ihre Frage zu beantworten:

Der Grund, warum dies nicht funktioniert, dass Ihr index.html, in dem Sie die <app something="Test"></app> platzieren ist keine Winkelkomponente ist. Aus diesem Grund wird Angular dieses Element nicht kompilieren. Und Angular liest Attributwerte nicht zur Laufzeit, sondern nur während der Kompilierzeit, da wir sonst einen Performance-Treffer bekommen würden.

In diesem Moment können Sie keine Eingabeparameter für das Wurzelelement verwenden.

Answer 2

Ich denke, man könnte noch verwenden:

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