通過模塊導入多個角度組件

Question

我的Angular項目越來越多，所以我想保持項目清潔。我有一個Angular組件，它依賴於嵌套的Angular組件。

現在我需要兩個導入語句來使用這些組件，這些組件不能互相工作。

作爲一個解決方案，我想創建一個包含這兩個組件並將模塊導入到我的主app.module中的小型Angular模塊。

這樣做後，我得到一個錯誤，指出小模塊內的組件之一不被識別。

//app.module.ts 
@NgModule({ 
    imports: [BrowserModule, HttpModule, DictaatModule], 
    declarations: [AppComponent, DictatenComponent, FilePreviewComponent], 
    bootstrap: [AppComponent] 
}) 


//Dictaat.module.ts 
import { DictaatComponent } from './dictaat.component'; 
import { DictaatEntryComponent } from './dictaat-entry.component'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
}) 
export class DictaatModule{ } 

我的問題：將多個組件分組到一個模塊是否是一個好習慣，這在Angular中是否已經得到支持？

ps。 我正在使用Angular 2.0.0，而不是任何RC。 我的設置與英雄教程遊覽的設置相當。

編輯：源代碼 https://github.com/Linksonder/Webdictaat/

錯誤消息：

---

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'. 
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
    </div> 
    <div class="col-md-3"> 
     <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat> 
    </d"): DictatenComponent@21:20 
'wd-dictaat' is not a known element: 
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 
    </div> 
    <div class="col-md-3"> 
     [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): DictatenComponent@21:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'. 
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
    </div> 
    <div class="col-md-3"> 
     <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat> 
    </d"): DictatenComponent@21:20 
'wd-dictaat' is not a known element: 
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 
    </div> 
    <div class="col-md-3"> 
     [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): DictatenComponent@21:8 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21) 
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85) 
    at Set.forEach (native) 
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37) 
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47) 

Answer 1

您需要將您的組件添加到Dictaat.module.ts的出口，以便他們能夠在您的app.module.ts進口：

//Dictaat.module.ts 
import { DictaatComponent } from './dictaat.component'; 
import { DictaatEntryComponent } from './dictaat-entry.component'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
    exports: [DictaatComponent, DictaatEntryComponent] 
}) 

export class DictaatModule{ } 

Answer 2

組件，指令和管道應該由導入此模塊變得可用，需要exports上市。 declarations是使這些組件可在模塊內：

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
    exports: [DictaatComponent, DictaatEntryComponent], 
}) 
export class DictaatModule{ } 

Answer 3

對於我來說，我有很多自定義組件，因此我創建了一個custom-view.module.ts並導出所有組件。

其它模塊要使用自定義視圖必須導入CustomViewModule

定製view.module.ts

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ RatingComponent ], 
    exports: [ RatingComponent ] 
}) 
export class CustomViewModule { } 

並在其中要使用自定義視圖（RatingComponent在這種情況下）等模塊

@NgModule({ 
    imports: [ 
    CustomViewModule 
    ] 
}) 

export class OtherModule { } 

我使用的是角度4+，然後導出DictaatComponent，然後將DictaatModule導入到應用程序模塊中並不適用於我。我仍然需要將所有DictaatModule導入每個想要使用DictaatComponent的模塊。

Answer 4

對於離子開關，使用延遲加載頁面。即使您在應用程序模塊級別導入它，也會出現此錯誤「它不是已知的屬性」。

原因是你使用離子的延遲加載功能。

所以要解決它，你只需要導入它在Page Module level。

很好的資源來理解延遲加載。

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/