Question

请检查下面的共享模块文件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import {SharedPipesModule} from '../../shared/pipes/shared-pipes.module';


@NgModule({
  declarations: [
    SharedPipesModule,
  ],
  imports: [
    CommonModule,
    HttpClientModule,
  ],
  exports: [
    SharedPipesModule,
  ]
})

export class SharedModule { }

我将自定义管道文件导入为“ SharedPipesModule”。现在我正在尝试访问另一个组件的sharedmodule文件。为此，我导入了共享文件。检查以下代码。

    import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { GlHeaderRoutModule } from './gl-header-rout.module';
import { PageHeaderModule } from './../../shared';
import { GlHeaderComponent} from './gl-header.component';
import {MatButtonModule, MatSort, MatPaginator, MatCardModule , MatTable, MatTableModule, MatSortable, MatTableDataSource, MatIconModule, MatSortModule, MatPaginatorModule} from '@angular/material';
import {MatExpansionModule} from '@angular/material/expansion';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {SharedModule} from '../../shared/org-sort/shared-module.module';
@NgModule({
  imports: [CommonModule, GlHeaderRoutModule, PageHeaderModule,
    MatFormFieldModule,
    MatInputModule,
    NgbModule, FormsModule,
    ReactiveFormsModule,
    MatIconModule, MatTableModule,
    MatSortModule, MatCardModule,
    MatProgressSpinnerModule, MatPaginatorModule, SharedModule,
    MatExpansionModule],
  declarations: [GlHeaderComponent]
})
export class GlHeaderModule { }

这是正确的吗？

当我运行项目时发生错误，

错误错误：未捕获（承诺）：错误：模板解析错误：找不到管道“唯一”（“> - 选择 - ] sortBy（'orgName'）的库| unique“> {{bank.orgName}}

SharedPipesModule代码，

import { NgModule, Pipe, Injectable, PipeTransform } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as _ from 'lodash';

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

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

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

Answer 1

在 SharedPipesModule 上尝试以下操作：

result =[3,6,9];

Answer 2

您应该删除@NgModule装饰器，只需按如下所示创建管道即可：

import { Pipe, Injectable, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

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



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

在您的sharedModule中，声明管道并将其导出，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import {SharedPipes} from '../../shared/pipes/shared-pipes.module';


@NgModule({
  declarations: [
    SharedPipes,
  ],
  imports: [
    CommonModule,
    HttpClientModule,
  ],
  exports: [
    SharedPipes,
  ]
})

export class SharedModule { }

angular 6共享模块不能与其他模块一起使用

2 个答案: