Как включить компонент в два отдельных модуля? - PullRequest
Новая
       6

Как включить компонент в два отдельных модуля?

2 голосов
/ 06 февраля 2020

У меня есть два модуля: ItemsListModule и SearchModule.

ItemsListModule упаковок ItemsListComponent и SearchModule упаковок SearchComponent.

ItemsList используется на странице, чтобы показать список элементов, и я также хотел бы использовать его в Search, чтобы показать список результатов. Другими словами: в SearchComponent я также хотел бы использовать ItemsListComponent. 

// SearchModule
@NgModule({
  declarations: [SearchComponent],
  imports: [SearchRoutingModule],
})

// ItemsListModule
@NgModule({
  declarations: [ItemsListComponent],
  imports: [],
})

// AppModule
@NgModule({
  declarations: [AppComponent],
  imports: [ItemsListModule, SearchModule],
})

Когда я затем использую <my-items-list> в шаблоне SearchComponent, я получаю ошибку что компонент неизвестен, и, пожалуйста, убедитесь, что он является частью SearchModule. Если я добавлю его в импорт SearchModule, я получу то же сообщение об ошибке.

Почему? Как я могу использовать ItemsList, чтобы показать результаты моего поиска? (Angular 8,3)

Ответы [ 4 ]

2 голосов
/ 06 февраля 2020

Экспортируйте ItemListComponent из ItemListModule и импортируйте этот модуль в SearchModule

Модуль поиска 

    @NgModule({
      declarations: [SearchComponent],
      imports: [SearchRoutingModule, ItemListModule],
    })

ItemsListModule 

    @NgModule({
      declarations: [ItemListComponent],
      exports: [ItemListComponent]
    })
2 голосов
/ 06 февраля 2020

ItemsListModule 

        @NgModule({
          declarations: [ItemsListComponent], // declare Item list component here
          imports: [],
          exports: [ItemListComponent]
        })

SearchModule 

        @NgModule({
          declarations: [SearchComponent],
          imports: [SearchRoutingModule,
                    ItemsListModule], // ? import ItemListModule Here

        })

и попробуйте использовать <my-items-list> в search.component. html, это будет работать.

1 голос
/ 06 февраля 2020

Вам нужно добавить ItemsListComponent в entrycomponents в вашем SearchModule, как это 

@NgModule({
declarations: [ 
   ItemsListComponent
],
entryComponents: [
    ItemsListComponent
  ]
})
0 голосов
/ 06 февраля 2020

вам нужно добавить компонент, который вы хотите использовать вне его модуля, в массив экспорта декоратора NgModule, затем вам нужно импортировать этот модуль в другой модуль и использовать этот компонент, так как здесь я экспортирую ItemsListComponent, тогда я могу использовать его вне модуля при импорте ItemsListModule в SearchModule

SearchModule 

@NgModule({
  declarations: [SearchComponent],
  imports: [SearchRoutingModule ,ItemsListModule], // ? 2️⃣
})

ItemsListModule 

@NgModule({
  declarations: [ItemsListComponent],
  exports: [ItemsListComponent], // ? 1️⃣
})

AppModule 

@NgModule({
  declarations: [AppComponent],
  imports: [SearchModule],
})

NgModule export : набор компонентов, директив и каналов, объявленных в этом NgModule это может использоваться в шаблоне любого компонента, который является частью NgModule, который импортирует этот NgModule. Экспортируемые объявления являются API модуля publi c.

...