網站搜尋

typescript - 在 Angular 6 中兩個具有共同組件的延遲加載模塊


我有一個像這樣的結構

---app.module
-------child1.module
-------child2.module

而我在兩個子模組中都使用了一個共用元件(app-film),我在 app.module 中聲明了它,但 Angular 仍然顯示錯誤

Can't bind to 'film' since it isn't a known property of 'app-film'.
1. If 'app-film' is an Angular component and it has 'film' input, then verify that it is part of this module.
2. If 'app-film' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

stackblitz https://stackblitz.com/github/ms-dosx86/films

答案#1

巢狀模組將無法看到在父模組中定義的元件(父模組匯入了巢狀模組)。你需要像這樣建立一個 SharedModule

@NgModule({
   declarations: [ AppFilmComponent ]
   exports: [ AppFilmComponent ]
})
export class SharedModule { }

從該模組中匯出AppFilmComponent,然後將SharedModule模組分別匯入兩個子模組。

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child1Module { }

和

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child2Module { }