Angular @Input 不适用于 bootstrap 组件

Question

我在 Angular2 class 中犯了一个错误，我没有清楚地了解 @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 后，程序运行正常。

我不明白当我将它用作 bootstrap 组件时，为什么 @input 不起作用？

尽管我从其他 angular 组件发送输入，Angular 是否总是忽略输入属性？

Answer 1

@Inputs()只能在组件模板中绑定。自举组件位于 index.html 任何其他组件之外，因此无法绑定到输入。

另见 Angular 2 external inputs

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

Answer 2

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

Angular @Input 不适用于 bootstrap 组件

Angular @Input is not working with bootstrap component

angular2-inputs

angular