Angular 管道在子路由上不工作
Angular Pipe not working on child routes
我在 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 { }
您不需要在管道上使用 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{}
参考: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;
}
}
创建辅助组件、管道或指令的最佳做法是创建一个 SharedModule
并将其放入其中。
组件、指令和管道不像服务那样工作。您可以将其注入 AppModule 的服务数组中的服务,这也适用于儿童。
管道、指令或组件,您必须在 NgModule 中声明它们,然后将其导入到您需要的地方,因为它们 只能属于 1 个模块 。 (但是那个模块可以多次导入!)
因此,您能做的最好的事情就是创建一个 SharedModule
,其中包含以下内容:
@NgModule({
imports: [ ... ],
declarations: [ DefaultPipe ],
exports: [ DefaultPipe ]
})
export class SharedModule { }
然后在 AppModule
中导入 SharedModule
如下:
imports: [ SharedModule ]
现在,如果您想在 LoginComponent 或应用程序的任何其他部分中使用它,您可以在该组件的模块中导入 SharedModule
。
我在 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 { }
您不需要在管道上使用 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{}
参考: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;
}
}
创建辅助组件、管道或指令的最佳做法是创建一个 SharedModule
并将其放入其中。
组件、指令和管道不像服务那样工作。您可以将其注入 AppModule 的服务数组中的服务,这也适用于儿童。
管道、指令或组件,您必须在 NgModule 中声明它们,然后将其导入到您需要的地方,因为它们 只能属于 1 个模块 。 (但是那个模块可以多次导入!)
因此,您能做的最好的事情就是创建一个 SharedModule
,其中包含以下内容:
@NgModule({
imports: [ ... ],
declarations: [ DefaultPipe ],
exports: [ DefaultPipe ]
})
export class SharedModule { }
然后在 AppModule
中导入 SharedModule
如下:
imports: [ SharedModule ]
现在,如果您想在 LoginComponent 或应用程序的任何其他部分中使用它,您可以在该组件的模块中导入 SharedModule
。