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 {}

您可以在以下位置了解更多信息：

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 { }

如何将角形管道用作共享组件或共享模块

2 个答案: