как использовать угловую трубу в качестве общего компонента или общего модуля

Question

Я использую функцию ниже как канал, чтобы получить уникальные значения в раскрывающемся списке. Мне нужно использовать это в нескольких компонентах. как создать компонент многократного использования для использования этой функции.

 @Pipe({
  name: 'unique',
  pure: false
})

export class UniquePipe implements PipeTransform {
  transform(value: any): any {
      if (value !== undefined && value !== null) {
          return _.uniqBy(value, 'orgName');
      }
      return value;
  }
}

Answer 1

Просто создайте модуль с именем SharedModule и затем экспортируйте труба от этого. Таким образом, он будет доступен в качестве публичного API для любого модулей, которые импортируют SharedModule.

Пример:

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { UniquePipe} from './pipes/unique.pipe';




@NgModule({
  declarations: [
    UniquePipe,
  ],
  imports: [
    CommonModule,
    HttpClientModule,
  ],
  exports: [
    UniquePipe,
  ]
})
export class SharedModule {}

Подробнее об этом можно прочитать по адресу:

1. https://angular.io/guide/sharing-ngmodules#sharing-modules
2. Руководство по стилю: https://angular.io/guide/styleguide#shared-feature-module

Answer 2

В вашем файле shared.module.ts вам просто нужно добавить его в declarations и exports, а затем вы можете импортировать этот модуль в любой другой модуль, где вы хотите использовать этот канал.

в pipe.components.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'mypipe',
})
export class MyPipe implements PipeTransform {
  // convert dictionary to list so that it can be iterated in html
  transform(objects: any = []) {
    return Object.values(objects);
  }
}

тогда в вашем shared.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ValueArrayPipe } from '../pipe/pipe.component';


@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [ValueArrayPipe ],
exports: [ValueArrayPipe ],
})
export class SharedPipesModule { }