Angular @Input 不适用于引导组件答案

【问题标题】：Angular @Input is not working with bootstrap componentAngular @Input 不适用于引导组件
【发布时间】：2017-07-13 17:58:03
【问题描述】：

我在 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 Module 中我犯了一个错误，将 AppDetailComponent 添加为引导组件

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

从引导列表中删除 AppDetailComponent 后，程序运行正常。

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

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

【问题讨论】：

标签： angular angular2-inputs

【解决方案1】：

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

另见Angular 2 external inputs

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

【讨论】：

我不确定我是否理解正确。我没有在 index.html 中添加输入，而是在 app.component.html 中添加了声明为 AppComponent 的 templateUrl
那你为什么要把AppDetailComponent加到bootstrap: []呢？
谢谢。我犯了一个错误，但我想知道一个原因。我尝试检查 javascript 文件，但一无所获。
我不明白你的意思。 Angular 只是不支持根组件中的输入，bootstrap 用于注册根组件。为不应该做任何事情的事情生成代码是没有意义的。

【解决方案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 { }

【讨论】：