Angular 管道在子路由上不工作

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 { }

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

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]

}) 导出 class AppModule { }

route.module.ts

中有一个

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

export class AppRoutingModule { }

Answer 1

您不需要在管道上使用 Injectable 装饰器，因此您可以将其删除。

此外，正如其他答案中已经建议的那样，我建议您明确实现 PipeTransform 接口，以便与管道 API.

保持一致

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)

基本上是说您的管道既没有在模块中声明也没有导入，其中声明了LoginComponent。

最简单和最干净的解决方案是 declare/export 新 NgModule class 中的管道，然后您可以将其导入到声明使用该管道的组件的每个模块中。例如：

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

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [LoginComponent]
})
export class FooModule {}

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [FooComponent] // fooComponent also uses the default pipe, so we need to import its module
})
export class SomeOtherModule{}

Answer 2

参考：here

自定义管道：

首先，没有 @Injectable() 因为它不是您将在构造函数中定义的服务。然后，你需要导入'@angular/core'中提供的PipeTransform并实现它。

示例：

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

@Pipe({
    name: "default"
})

export class DefaultPipe implements PipeTransform {
    transform(value: string, fallback: string): string {
        let image = "";
        if (value) {
            image = value;
        } else {
            image = fallback;
        }
        return image;
    }
}

Answer 3

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

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

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

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

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

然后在 AppModule 中导入 SharedModule 如下：

imports: [ SharedModule ]

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

Angular 管道在子路由上不工作

Angular Pipe not working on child routes

angular

typescript

angular-pipe

自定义管道：