自定义管道：

Question

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

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未捕获错误：模板解析错误：管道   ＆＃39;默认＆＃39;无法找到（＆＃34;

      {{[ERROR - ＆gt;]＆＃39; somthing＆＃39; | default}}＆＃34;）：ng：///AppRoutingModule/LoginComponent.html@75：6       在syntaxError（compiler.js：486）       在TemplateParser.webpackJsonp ../ node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.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的services数组中注入一个服务，该服务也适用于儿童。

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

因此，您可以做的最好的事情是使用以下内容创建SharedModule：

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

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

imports: [ SharedModule ]

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

Answer 2

你不需要在管道上使用UsernamePasswordAuthenticationToken authReq = new UsernamePasswordAuthenticationToken(user, pass); Authentication auth = authManager.authenticate(authReq); SecurityContext sc = SecurityContextHolder.getContext(); securityContext.setAuthentication(auth);装饰器，所以你可以删除它。

此外，正如其他答案中已经建议的那样，我建议您明确地实现Injectable接口，以便与管道API保持一致。

compiler.js：486未捕获错误：模板解析错误：管道＆＃39;默认＆＃39;无法找到（＆＃34;

{{[ERROR - ＆gt;]＆＃39; somthing＆＃39; |默认}}＆＃34;）：ng：///AppRoutingModule/LoginComponent.html@75：6 at syntaxError（compiler.js：486）

基本上是说你的管道既未在模块中声明或导入，其中声明了PipeTransform。

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

LoginComponent

Answer 3

参考：here

自定义管道：

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

示例：

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

Angular Pipe无法处理子路由

3 个答案:

自定义管道：