RC5中的外部模塊：由於它不是已知屬性，因此無法綁定到“ X”

Question

在更新RC4 => RC5的過程中，已將幾個組件拉入模塊。 現在，得到一個運行時錯誤： Unhandled Promise rejection: Template parse errors: Can't bind to 'X' since it isn't a known property of 'Y' 。

• 如果我將組件類添加到應用程序的@NgModule()裝飾器的declarations屬性中，則它將起作用。
• 僅當組件類在外部模塊中並且將該模塊添加到應用程序的@NgModule()的imports屬性中時， @NgModule()此錯誤。

這是一個笨拙的人 。

外部模塊代碼

export class ExampleConfig {
  public name: string;
}

@Component({
  selector: 'example',
  template: '<strong>{{ config?.name }}</strong>'
})
export class ExampleComponent {
  @Input() config: ExampleConfig;
}

@NgModule({
  declarations: [ExampleComponent]
})
export class ExampleModule {}

應用模塊代碼

@Component({
  selector: 'my-app',
  template: '<h2>Hello <example [config]="exampleConfig"></example></h2>'
})
export class App {
  constructor() {
    this.exampleConfig = new ExampleConfig();
    this.exampleConfig.name = 'World';
  }
  protected exampleConfig: ExampleConfig;
}

@NgModule({
  imports: [BrowserModule, ExampleModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule {}

Answer 1

在material2源代碼中進行挖掘，似乎您必須將組件添加到模塊裝飾器的exports屬性中：

@NgModule({
  declarations: [ExampleComponent],
  exports: [ExampleComponent]
})
export class ExampleModule {}

Answer 2

無法綁定到“ X”，因為它不是已知屬性

如果看到此錯誤，請確保您的引導模塊文件中未包含組件，請執行以下操作

如果您有3個組件

 1. app.component.ts
 2. greeting.service.ts
 3. hello.ts

然后在您的主引導文件中包含以下所有內容

import { BrowserModule }  from '@angular/platform-browser';  
import { NgModule } '@angular/core';
import { MyApp } from './app.component'
import {Welcome} from './services/welcome';
import {Hello} from './hello.component';

@NgModule({
  imports: [BrowserModule],
  providers:[Welcome],
  declarations: [MyApp
                  ,Hello
                ],
  bootstrap: [MyApp]
})
export class MyAppModule {

}