Angular @ Input arbeitet nicht mit Bootstrap-Komponente

Question

Ich habe einen Fehler in meiner Angular2-Klasse und ich habe nicht klar verstanden über @Input.

Ich habe 2 Komponenten AppComponent und AppDetailComponent erstellt.

In AppDetailComponent:

import { Component, Input } from '@angular/core'; 


@Component ({ 
selector: 'app-detail', 
template: 'Hi {{datainput}}' 
}) 

export class AppDetailComponent { 

@Input() 
datainput: string; 

} 

und in AppComponent Vorlage:

<h1> 
    {{title}} 
</h1> 
<app-detail [datainput]="'test'"></app-detail> 

und in App-Modul machte ich einen Fehler durch hinzufügen AppDetailComponent als Bootstrap-Komponente

import { AppComponent } from './app.component'; 
import { AppDetailComponent } from './app-detail.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, AppDetailComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent, AppDetailComponent] 
}) 
export class AppModule { } 

Nachdem ich entfernt AppDetailComponent aus der Bootstrap-Liste, Programm hat korrekt funktioniert.

Ich verstehe nicht warum @input nicht funktioniert, wenn ich es als Bootstrap-Komponente verwenden?

Wird Angular immer Input-Eigenschaft ignorieren, obwohl ich die Eingabe von einer anderen Winkelkomponente senden?

Answer 1

@Inputs() können nur in Vorlagen einer Komponente gebunden werden. Bootstrapped Komponenten sind in index.html außerhalb jeder anderen Komponente und daher dort ist es nicht möglich, an Eingaben zu binden.

Siehe auch Angular 2 external inputs

Wenn Sie keinen passenden Wähler in index.html haben und nicht wollen, dass eine Komponente als Stammkomponente verwenden, dann fügen Sie es nicht zu bootstrap: [...]

Answer 2

Sie müssen Bootstrap nur die AppComponent.

import { AppComponent } from './app.component'; 
import { AppDetailComponent } from './app-detail.component'; 

@NgModule({ 
    declarations: [AppComponent, AppDetailComponent], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }