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 的提供者部分中添加了

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

当您在普通组件中使用它时，例如

应用程序组件.html

它工作正常，但如果您在子路由中使用的组件中使用它，则会出现以下错误：

compiler.js:486 未捕获错误：模板解析错误：找不到管道“默认”（“

{{[错误 ->] '东西' | 默认}}“）：ng:///AppRoutingModule/LoginComponent.html@75:6在TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser处的syntaxError（compiler.js:486） .parse (compiler.js:24674) 在 JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34629) 在 JitCompiler.webpackJsonp../node_modules/@angular /compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34604) 在compiler.js:34505 在 Set.forEach () 在 JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js .JitCompiler._compileComponents (compiler.js:34505) 在 compiler.js:34375 在 Object.then (compiler.js:475) 在 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并将其放入其中。

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

A Pipe, Directive or Component you have to declare them in an NgModule and then import it where you need it, because they can ONLY belong to 1 Module. (But that module can be imported as many times as you want!)

Therefore, the best thing you could do is to create a SharedModule with the following:

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

And then in AppModule you import SharedModule like this:

imports: [ SharedModule ]

And now, if you want to use it in your LoginComponent or in any other part of your application, you import your SharedModule in the module for that component.