Ionic-3 找不到管道
Ionic-3 Can't find Pipe
我刚刚升级到 Ionic 3.0.1
所以我可以使用 LazyLoading
,从那以后我不能使用我的自定义 Pipes
:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'StripHTML'
})
export class StripHTML implements PipeTransform {
transform(value, args) {
let striped = value.replace(/(<([^>]+)>)/g, "");
if (args != null) {
if (args.split != null) {
striped = striped.split(args.split);
if (args.index != null) {
striped = striped[args.index];
}
}
}
return striped;
}
}
并在 app.module.ts
中我将其添加到声明中:
@NgModule({
declarations: [
........,
StripHTML
],
...
现在,当我尝试在 html
模板中使用它时出现错误:
core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'StripHTML' could not be found ("
<ion-card-content>
<ion-card-title style="font-size: 100%">
{{ [ERROR ->]product.title | StripHTML }}
</ion-card-title>
</ion-card-content>
"): ng:///HomeModule/Home.html@33:17
这里有什么我遗漏的吗?
所以我通过创建一个 PipesModule
来解决这个问题,我将自定义 Pipes
导入其中,然后将其导入我想在 [=16] 上使用它的页面 module.ts
=]
import { NgModule } from '@angular/core';
import { StripHTML } from './strip-html';
@NgModule({
declarations: [
StripHTML,
],
imports: [
],
exports: [
StripHTML
]
})
export class PipesModule { }
然后在页面中| HomePage
举例:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Home } from './home';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
declarations: [
Home,
],
imports: [
IonicPageModule.forChild(Home),
PipesModule
],
exports: [
Home
]
})
export class HomeModule { }
确实工作正常,不确定这是否正确,但工作正常,如果有更好的方法请告诉我...谢谢!
您需要做的只是 将 PipesModule(下面代码段中的第 12 行)导入到每个 page.module.ts(即 home.moodule.ts)文件中....
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
PipesModule
]
})
export class LoginPageModule { }
这对我有用。
我刚刚升级到 Ionic 3.0.1
所以我可以使用 LazyLoading
,从那以后我不能使用我的自定义 Pipes
:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'StripHTML'
})
export class StripHTML implements PipeTransform {
transform(value, args) {
let striped = value.replace(/(<([^>]+)>)/g, "");
if (args != null) {
if (args.split != null) {
striped = striped.split(args.split);
if (args.index != null) {
striped = striped[args.index];
}
}
}
return striped;
}
}
并在 app.module.ts
中我将其添加到声明中:
@NgModule({
declarations: [
........,
StripHTML
],
...
现在,当我尝试在 html
模板中使用它时出现错误:
core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'StripHTML' could not be found ("
<ion-card-content>
<ion-card-title style="font-size: 100%">
{{ [ERROR ->]product.title | StripHTML }}
</ion-card-title>
</ion-card-content>
"): ng:///HomeModule/Home.html@33:17
这里有什么我遗漏的吗?
所以我通过创建一个 PipesModule
来解决这个问题,我将自定义 Pipes
导入其中,然后将其导入我想在 [=16] 上使用它的页面 module.ts
=]
import { NgModule } from '@angular/core';
import { StripHTML } from './strip-html';
@NgModule({
declarations: [
StripHTML,
],
imports: [
],
exports: [
StripHTML
]
})
export class PipesModule { }
然后在页面中| HomePage
举例:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Home } from './home';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
declarations: [
Home,
],
imports: [
IonicPageModule.forChild(Home),
PipesModule
],
exports: [
Home
]
})
export class HomeModule { }
确实工作正常,不确定这是否正确,但工作正常,如果有更好的方法请告诉我...谢谢!
您需要做的只是 将 PipesModule(下面代码段中的第 12 行)导入到每个 page.module.ts(即 home.moodule.ts)文件中....
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
PipesModule
]
})
export class LoginPageModule { }
这对我有用。