Angular Pipe 不适用于子路线

Question

我在 Angular 5 中有一个非常简单的管道

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

@Pipe({
    name: "default"
})
@Injectable()
export class DefaultPipe {
    transform(value: string, fallback: string): string {
        let image = "";
        if (value) {
            image = value;
        } else {
            image = fallback;
        }
        return image;
    }
}

我以非常简单的方式使用它只是为了演示

<div>
    {{ 'somthing' | default }}
</div> 

我还在 app.module.ts 的 provider 部分添加了

@NgModule({
    declarations: [
        AppComponent,
        DefaultPipe // <-- Here
    ],
    imports: [
        ....
    ],
    providers: [
        ....
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

当你在普通组件中使用它时，比如

app.component.html

它工作正常，但如果你在子路由中使用的组件中使用它，则会出现此错误:

compiler.js:486 Uncaught Error: Template parse errors: The pipe 'default' could not be found ("

{{[ERROR ->] 'somthing' | default }} "): ng:///AppRoutingModule/LoginComponent.html@75:6 at syntaxError (compiler.js:486) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24674) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34629) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34604) at compiler.js:34505 at Set.forEach () at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34505) at compiler.js:34375 at Object.then (compiler.js:475) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34374)

要解决:

我将此模块添加为 share.module.ts

import { NgModule } from '@angular/core';
import { DefaultPipe } from './core/pipes/default.pipe';

@NgModule({
    declarations: [DefaultPipe],
    exports: [DefaultPipe]
})
export class SharedModule { }

并在 2 个地方使用它，一个在 app.module.ts 中:

@NgModule({
declarations: [
    AppComponent,
],
imports: [
    ...
    // other modules
    ...
    SharedModule
],
providers: [
    ....
],
bootstrap: [AppComponent]

})导出类 AppModule { }

还有一个在route.module.ts

@NgModule({
    declarations: [
        ....
    ],
    imports: [
        ....
        SharedModule
    ],
    exports: [
        RouterModule,
    ]
})

export class AppRoutingModule { }

Answer 1

创建辅助组件、管道或指令的最佳实践是创建一个 SharedModule 并将其放入其中。

组件、指令和管道不像服务那样​​工作。您可以将其注入(inject) AppModule 的服务数组中的服务，它也适用于 child 。

您必须在 NgModule 中声明管道、指令或组件，然后将其导入到您需要的地方，因为它们只能属于 1 个模块。 (但该模块可以导入任意多次!)

因此，您能做的最好的事情就是创建一个 SharedModule，其中包含以下内容:

@NgModule({
  imports: [ ... ],
  declarations: [ DefaultPipe ],
  exports: [ DefaultPipe ]
})
export class SharedModule { }

然后在 AppModule 中导入 SharedModule，如下所示:

imports: [ SharedModule ]

现在，如果您想在您的 LoginComponent 或应用程序的任何其他部分中使用它，您可以在该组件的模块中导入您的 SharedModule。