通过模块导入多个 Angular 组件

Question

我的 Angular 项目正在增长，所以我想保持我的项目干净。

我有一个 Angular 组件，它依赖于一个嵌套的 Angular 组件。

现在我需要两个 import 语句来使用这些组件，这些组件没有彼此就无法工作。

作为解决方案，我想创建一个包含这两个组件的小 Angular 模块，并将该模块导入到我的主 app.module 中。

执行此操作后，我收到一条错误消息，指出小模块内的组件之一无法识别。

//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

通过导入此模块应该可用的组件、指令和管道需要在 exports 中列出。 declarations 是使这些组件在模块内可用：

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

Answer 2

您需要将您的组件添加到 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 3

对我来说，我有很多自定义组件，所以我创建了一个自定义组件-view.module.ts并导出了所有组件。

其他模块要使用自定义视图必须导入CustomViewModule

自定义-view.module.ts

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

并且在其他想要使用自定义视图的模块中（在本例中为 RatingComponent）

@NgModule({
  imports: [
    CustomViewModule
  ]
})

export class OtherModule { }

我正在使用 angular 4+，导出 DictaatComponent 然后将 DictaatModule 导入应用程序模块对我不起作用。我仍然必须将所有 DictaatModule 导入到每个想要使用 DictaatComponent 的模块。

Answer 4

对于离子开发者，使用延迟加载页面。即使您在应用程序模块级别导入它，也可能会出现此 "it isn't a known property of" 错误。

原因是您使用了 ionic 的延迟加载功能。

所以要修复它，您只需将其导入 Page Module level。

了解延迟加载的好资源。

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

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

通过模块导入多个 Angular 组件

Import multiple Angular components via module

components

module

separation-of-concerns

angular