Angular @Input не работает с компонентом начальной загрузки

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>

и в модуле приложения я сделал ошибку, добавив 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 всегда игнорировать свойство input, несмотря на то, что я отправляю входные данные из другого углового компонента?

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