Angular @Input不使用Bootstrap组件

Question

我在我的angular2类中犯了一个错误，我对 @input >。

我没有清楚地理解

我创建了2个组件AppComponent和AppDetailComponent。

在AppDetailComponent中：

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

@Component ({
selector: 'app-detail',
template: 'Hi {{datainput}}'
})
export class AppDetailComponent {
@Input()
datainput: string;
}

和AppComponent模板：

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

和在App模块中，我通过添加AppDetailComponent作为Bootstrap组件

犯了一个错误

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 { }

从Bootstrap列表中删除AppDetailComponent后，程序正常工作。

我不明白为什么@Input剂量将其用作bootstrap组件时不起作用？

尽管我从其他角组件发送输入？

Answer 1

@Inputs()只能在组件的模板中绑定。引导组件位于任何其他组件之外的index.html中，因此不可能绑定到输入。

另请参见Angular 2外部输入

如果您在index.html中没有匹配的选择器，并且不想将组件用作根组件，则不要将其添加到bootstrap: [...]

Answer 2

您只需要引导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 { }