javascript - 全局使用 Angular 管

Question

我正在使用 Angular 开发 Ionic 项目，我需要对几乎所有页面使用管道，但出现错误:

逻辑

1. 如果我在其中一个页面中使用声明，管道就可以正常工作
2. 如果我在另一个页面添加相同的声明，它会返回错误该 pipe 已使用两次，我可能会考虑使用上部模块。
3. 如果我将管道添加到 app.module.ts 文件并尝试在我的页面中访问它，它会说找不到管道!

知道如何在全局范围内获取我的管道吗？

代码

app.module.ts

import { KeepHtmlPipe } from './pipes/keep-html.pipe';

@NgModule({
  declarations: [AppComponent, KeepHtmlPipe],
  entryComponents: [],
  imports: [
    HttpClientModule,
    FormsModule,
    CommonModule,
    ReactiveFormsModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    VariationsPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LaunchReview,
    NativeStorage,
    ImagePicker,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'keepHtml'
})
export class KeepHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

html 文件中的用法

<div [innerHTML]="product.stars | keepHtml"></div>

更新

根据我制作的新文件pipes.module.ts

的答案

import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';

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

然后将其添加到我的app.module.ts

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    HttpClientModule,
    FormsModule,
    CommonModule,
    PipesModule, //here
    ReactiveFormsModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    VariationsPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LaunchReview,
    NativeStorage,
    ImagePicker,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在我的页面中我添加了以下内容:

import { KeepHtmlPipe } from 'src/app/pipes/keep-html.pipe';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [FavoritesPage, KeepHtmlPipe], //here
  exports: [
    KeepHtmlPipe //and here
  ]
})
export class FavoritesPageModule {}

现在我收到此错误:

ERROR Error: Uncaught (in promise): Error: Type KeepHtmlPipe is part of the declarations of 2 modules: PipesModule and FavoritesPageModule! Please consider moving KeepHtmlPipe to a higher module that imports PipesModule and FavoritesPageModule. You can also create a new NgModule that exports and includes KeepHtmlPipe then import that NgModule in PipesModule and FavoritesPageModule.

Answer 1

发布答案以尝试帮助解释一些事情。

正如其他人所回答的，您需要创建某种“共享”模块。在您的更新中，您将其命名为 PipesModule ，所以从现在开始我将使用它。

管道模块:

import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';

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

现在，当您将其导入任何其他模块时，您将自动访问 KeepHtmlPipe .

收藏夹页面模块:

import { PipesModule } from 'src/app/pipes/pipes.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    PipesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    FavoritesPage
  ]
})
export class FavoritesPageModule {}

添加PipesModule此处的导入使您可以访问 KeepHtmlPipe已在 PipesModule 中导出在此模块中声明的任何组件中(即: declarations 列表的一部分)。

favorites-page.component.html

<div [innerHTML]="product.stars | keepHtml"></div>

现在应该可以正常工作了。