通过模块导入多个 Angular 组件

Posted 2023-02-23

【中文标题】通过模块导入多个 Angular 组件

【英文标题】：Import multiple Angular components via module

【发布时间】：2017-01-27 02:10:26

【问题描述】：

我的 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)

【问题讨论】：

请贴出错误信息。

Angular style guide

【参考方案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 

【讨论】：

感谢您的快速回复！该问题现已修复。还不能标记为正确答案。会在几分钟内完成。

【参考方案2】：

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

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

【讨论】：

这里也一样，感谢分析器。您的解决方案与 Stefan Svrkota 相同。

【参考方案3】：

对于离子开发者，使用延迟加载页面。即使您在应用模块级别导入此“它不是已知属性”错误也可能发生。

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

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

了解延迟加载的好资源。

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

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

【参考方案4】：

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

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

custom-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 的模块。