【问题标题】:Angular2 - How does my module import and use another module?Angular2 - 我的模块如何导入和使用另一个模块?
【发布时间】:2016-11-10 20:09:36
【问题描述】:

我的组件ListingComponent 使用了一个名为MemberCountryFilter 的组件。我有这个模块,一切正常。

@NgModule({
    imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule],
    declarations: [ListingComponent, MemberCountryFilter],
    exports: [ListingComponent,MemberCountryFilter,],
    providers: []

})
export class ListingComponent { }

我意识到另一个模块很快就会需要 MemberCountryFilter 组件,所以我进行了重构。我为 MemberCountryFilter 组件创建了这个模块,我想将它导入到其他模块中。

@NgModule({
    imports: [],
    declarations: [MemberCountryFilter],
    exports: [MemberCountryFilter],
    providers: []
})
export class FilterModule { }

我把原来的模块改成了这样:

@NgModule({
    imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule, FilterModule],
    declarations: [ListingComponent],
    exports: [ListingComponent, FilterModule,],
    providers: []

})
export class ListingComponent { }

执行此操作后,我得到如下模糊的模板解析错误:

zone.js:355 未处理的承诺拒绝:模板解析错误:不能 绑定到“ngForOf”,因为它不是“ul”的已知属性。 ("]*ngFor="let smc of selectedMemberCountries">

ListingComponent 似乎不知道 MemberCountryFilter 是什么。显然,我对模块有些不了解。我已经阅读了文档,我认为我做得对。

FilterModule 中的导出应该使 MemberCountryFilter 可用。然后我将它导入到 ListingSharedModule 中,然后将其导出以使其对 ListingComponent 可用。

对于基本概述,我将 MemberCountryFilter 作为声明(带导出)并且它有效。我将它移到另一个模块中,然后导入和导出该模块,但它不起作用。

我错过了什么?

【问题讨论】:

  • NgFor 指令属于从 BrowserModule 导入的 CommonModule,也许你应该在 ListingSharedModule 上导入 BrowserModule
  • 我有 CommonModule 作为导入。为了简洁起见,我将它们排除在外。我会更新帖子。基本上,它正在工作,然后我删除了 MemberCountryFilter 并用那个 FilterModule 替换它,它就停止了工作。我不想用很多不相关的东西把帖子弄得乱七八糟。

标签: angular angular2-modules


【解决方案1】:

我之前也遇到过类似的错误,发生在我身上的是我在*.module.ts 文件中错过了import { CommonModule } from '@angular/core', 对于您的FilterModule,请尝试以下操作:

import { CommonModule } from '@angular/core';
@NgModule({
    imports: [CommonModule],
    declarations: [MemberCountryFilter],
    exports: [MemberCountryFilter],
    providers: []
})
export class FilterModule { }

【讨论】:

  • 这就是答案。我认为通用模块只需要在使用时加载即可,确实如此。但现在我知道它需要加载到使用它的模块中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-23
  • 2022-12-10
  • 1970-01-01
  • 1970-01-01
  • 2019-12-22
相关资源
最近更新 更多