Angular2 – Как мой модуль импортирует и использует другой модуль?

Мой компонент 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="разрешить smc выбранных стран-членов">

Похоже, что ListingComponent не знает, что такое MemberCountryFilter. Очевидно, я чего-то не понимаю в модулях. Я прочитал документацию и думаю, что делаю это правильно.

Экспорт в FilterModule должен сделать доступным MemberCountryFilter. Затем я импортирую его в ListingSharedModule и экспортирую, что должно сделать его доступным для ListingComponent.

Для общего обзора у меня был MemberCountryFilter в качестве объявления (с экспортом), и это сработало. Я переместил его в другой модуль, затем импортировал и экспортировал этот модуль, но он не работает.

Что мне не хватает?


angular angular2-modules
person Don Chambers    schedule 10.11.2016    source источник
comment
Директива NgFor принадлежит CommonModule, который импортируется из BrowserModule, возможно, вам следует импортировать BrowserModule в ListingSharedModule.   -  person Alcruz    schedule 10.11.2016
comment
CommonModule в ссылке API angular.io/docs/ts /latest/api/common/index/   -  person Alcruz    schedule 10.11.2016
comment
У меня есть CommonModule в качестве импорта. Я опустил их для краткости. Я обновлю пост. По сути, это работало, затем я удалил MemberCountryFilter и заменил его этим FilterModule, и он перестал работать. Я не хотел загромождать пост кучей не связанных между собой пунктов.   -  person Don Chambers    schedule 10.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

У меня была похожая ошибка раньше, что случилось со мной, я пропустил import { CommonModule } from '@angular/core' в моем файле *.module.ts, для вашего FilterModule попробуйте следующее:

import { CommonModule } from '@angular/core';
@NgModule({
    imports: [CommonModule],
    declarations: [MemberCountryFilter],
    exports: [MemberCountryFilter],
    providers: []
})
export class FilterModule { }
person Bo Chen    schedule 10.11.2016
comment
Это ответ. Я думал, что общий модуль просто нужно загрузить, но время, когда он использовался, так и было. Но теперь я знаю, что его нужно загрузить в модуль, где он используется. - person Don Chambers; 11.11.2016