Ошибка при импорте пользовательского канала Angular из общей папки

#angular #typescript #module #single-page-application #angular9

#angular #typescript #модуль #одностраничное приложение #angular9

Вопрос:

Я создал пользовательский канал из общей папки, чтобы использовать его в компоненте 1 (пример: компонент заявителя) HTML, поэтому я импортировал его в ApplicantModule. Моя цель состоит в том, чтобы этот канал можно было повторно использовать в компоненте 2 (пример: компонент-заявитель), поэтому я также импортирую этот пользовательский канал в модуль компонента 2, который является CoApplicantModule. После компиляции я получил ошибку консоли.

введите описание изображения здесь

Когда я попытался переместить оператор импорта пользовательского канала в SharedModule и попробовал канал из компонента 2, я получил ошибку консоли. введите описание изображения здесь

Я хотел бы попросить вашей помощи, поскольку не смог найти ошибку для этого, потому что я предполагаю, что она будет работать, поскольку SharedModule также был импортирован ApplicantModule и CoApplicantModule

Ответ №1:

Вы не можете объявить свой pipe в более чем одном module . Вы можете создать module для всех своих пользовательских каналов, а затем просто импортировать его во все компоненты, необходимые для их использования.


Обычно я создаю каталог, чтобы все было организовано. В данном случае каталог каналов.

каналы /pipes.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyCustomPipe } from './myCustom.pipe';

@NgModule({
  declarations: [MyCustomPipe],
  imports: [
    CommonModule
  ],
  entryComponents: [MyCustomPipe],
  exports: [MyCustomPipe]
})
export class PipesModule { }
 

Теперь вы можете повторно использовать это в любом из ваших компонентов. Например:

pages/home/home.module.ts

 ...
import { PipesModule } from "../../pipes/pipes.module";
...

@NgModule({
  imports: [
    ...,
    PipesModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}
 

Теперь они уже доступны здесь.

pages/home/home.page.html

 ...
<p>{{ something | myCustomPipe }}</p>
...
 

Ответ №2:

В вашей ошибке говорится, что вы объявили pipe в 2 модулях. Вы получили решение в своем сообщении об ошибке. Вы можете создать другой модуль, в который вы добавляете свой pipe declarations , а затем экспортируете его, exports и вместо «импорта» вашего pipe by declarations вы просто импортируете созданный модуль imports .