typescript 如何使扩展语法与NgModule声明中“export const pipes = _pipes”一起工作

rnmwe5a2 于 12个月前发布在 TypeScript

关注(0)|答案(1)|浏览(148)

StackBlitz for this problem
我想创建一些常量管道并将它们一起导入app.module.ts。
当我使用像export const pipes = [MinValue, MaxValue]这样的语法时，它可以工作，但当我使用export const pipes = _pipes时，它就不工作了，它说No pipe found with name 'MIN_VALUE'。
问题是，我想把同一个常量的逻辑放在一起，如果我使用第一种方法，当文件中有很多常量时，我需要在添加或删除常量时跳来跳去。那么，是否有可能使第二种方法起作用？
constant.ts：

import { Pipe, PipeTransform } from '@angular/core';

const _pipes = [];

@Pipe({ name: 'MIN_VALUE' })
export class MinValue implements PipeTransform {
  transform = (v?: any) => 1;
}
_pipes.push(MinValue);

@Pipe({ name: 'MAX_VALUE' })
export class MaxValue implements PipeTransform {
  transform = (v?: any) => 10;
}
_pipes.push(MaxValue);

export const pipes = _pipes; // <- this does not work
// export const pipes = [MinValue, MaxValue]; // <- this works

字符串
app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { pipes } from './constant';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent, ...pipes], // <- spread syntax here
  bootstrap: [AppComponent],
})
export class AppModule {}

型

typescript

来源：https://stackoverflow.com/questions/77486190/how-to-make-spread-syntax-work-with-export-const-pipes-pipes-in-ngmodules

1条答案

按热度按时间

oknrviil1#

你可以通过创建一个共享模块来全局声明一个管道，并在不同的模块中使用它。共享模块是一个声明和导出公共部分的模块，使它们可用于任何其他模块。下面是如何创建一个共享模块：

创建一个名为SharedModule的新模块。
将管道添加到NgModule装饰器元数据的声明和导出数组中。
将管道工作所需的任何模块添加到导入数组。下面是如何创建共享模块的示例：

import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { MinValue } from './constant';
    
    @NgModule({
      imports: [CommonModule],
      declarations: [MinValue],
      exports: [MinValue],
    })
    export class SharedModule {}

字符串
然后，您可以将SharedModule模块导入到将要使用管道的模块中，方法是将其添加到imports数组中：

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ReactiveFormsModule } from '@angular/forms';
    
    import { AppComponent } from './app.component';
    
    import { SharedModule } from './shared.module';
    
    @NgModule({
      imports: [BrowserModule, ReactiveFormsModule, SharedModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

型
这样，您就可以在导入SharedModule模块的任何模块中使用MinValue管道，而无需再次声明它。

赞(0）回复(0）举报 12个月前

我来回答

typescript 如何使扩展语法与NgModule声明中“export const pipes = _pipes”一起工作

1条答案

相关问题

热门标签

最新问答