admin管理员组文章数量:1327661
I am working on Ionic project with angular, I need to use pipe for almost all my pages but I am getting errors:
Logic
- If I use
declarations
in one of my pages pipe works just fine - If I add same
declarations
in another page it returns error that this pipe has been used twice and I might consider using upper module. - If I add my pipe to
app.module.ts
file and try to access it in my pages it says pipe not found!
Any idea how to get my pipe globally?
Code
app.module.ts
import { KeepHtmlPipe } from './pipes/keep-html.pipe';
@NgModule({
declarations: [AppComponent, KeepHtmlPipe],
entryComponents: [],
imports: [
HttpClientModule,
FormsModule,
CommonModule,
ReactiveFormsModule,
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
VariationsPageModule
],
providers: [
StatusBar,
SplashScreen,
LaunchReview,
NativeStorage,
ImagePicker,
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
pipe
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'keepHtml'
})
export class KeepHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
usage in html files
<div [innerHTML]="product.stars | keepHtml"></div>
Update
based on answers I've made new file pipes.module.ts
import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';
@NgModule({
declarations: [
KeepHtmlPipe
],
imports: [],
exports: [
KeepHtmlPipe
]
})
Then add it to my app.module.ts
import { PipesModule } from './pipes/pipes.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
HttpClientModule,
FormsModule,
CommonModule,
PipesModule, //here
ReactiveFormsModule,
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
VariationsPageModule
],
providers: [
StatusBar,
SplashScreen,
LaunchReview,
NativeStorage,
ImagePicker,
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
And in my pages I add this:
import { KeepHtmlPipe } from 'src/app/pipes/keep-html.pipe';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [FavoritesPage, KeepHtmlPipe], //here
exports: [
KeepHtmlPipe //and here
]
})
export class FavoritesPageModule {}
Now I'm getting this error:
ERROR Error: Uncaught (in promise): Error: Type KeepHtmlPipe is part of the declarations of 2 modules: PipesModule and FavoritesPageModule! Please consider moving KeepHtmlPipe to a higher module that imports PipesModule and FavoritesPageModule. You can also create a new NgModule that exports and includes KeepHtmlPipe then import that NgModule in PipesModule and FavoritesPageModule.
I am working on Ionic project with angular, I need to use pipe for almost all my pages but I am getting errors:
Logic
- If I use
declarations
in one of my pages pipe works just fine - If I add same
declarations
in another page it returns error that this pipe has been used twice and I might consider using upper module. - If I add my pipe to
app.module.ts
file and try to access it in my pages it says pipe not found!
Any idea how to get my pipe globally?
Code
app.module.ts
import { KeepHtmlPipe } from './pipes/keep-html.pipe';
@NgModule({
declarations: [AppComponent, KeepHtmlPipe],
entryComponents: [],
imports: [
HttpClientModule,
FormsModule,
CommonModule,
ReactiveFormsModule,
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
VariationsPageModule
],
providers: [
StatusBar,
SplashScreen,
LaunchReview,
NativeStorage,
ImagePicker,
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
pipe
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'keepHtml'
})
export class KeepHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
usage in html files
<div [innerHTML]="product.stars | keepHtml"></div>
Update
based on answers I've made new file pipes.module.ts
import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';
@NgModule({
declarations: [
KeepHtmlPipe
],
imports: [],
exports: [
KeepHtmlPipe
]
})
Then add it to my app.module.ts
import { PipesModule } from './pipes/pipes.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
HttpClientModule,
FormsModule,
CommonModule,
PipesModule, //here
ReactiveFormsModule,
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
VariationsPageModule
],
providers: [
StatusBar,
SplashScreen,
LaunchReview,
NativeStorage,
ImagePicker,
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
And in my pages I add this:
import { KeepHtmlPipe } from 'src/app/pipes/keep-html.pipe';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [FavoritesPage, KeepHtmlPipe], //here
exports: [
KeepHtmlPipe //and here
]
})
export class FavoritesPageModule {}
Now I'm getting this error:
ERROR Error: Uncaught (in promise): Error: Type KeepHtmlPipe is part of the declarations of 2 modules: PipesModule and FavoritesPageModule! Please consider moving KeepHtmlPipe to a higher module that imports PipesModule and FavoritesPageModule. You can also create a new NgModule that exports and includes KeepHtmlPipe then import that NgModule in PipesModule and FavoritesPageModule.
Share
Improve this question
edited Sep 2, 2019 at 4:22
mafortis
asked Sep 2, 2019 at 3:51
mafortismafortis
7,13826 gold badges151 silver badges322 bronze badges
7
-
Add
PipesModule
to any modules where you're using the Pipe. Do not add it to the declarations, or exports for any module other than thePipesModule
– Jacques Commented Sep 2, 2019 at 4:28 - @Jacquesジャック using it in import? – mafortis Commented Sep 2, 2019 at 4:30
-
You only need to import the PipesModule in
app.module.ts
and all pipes will be available globally. You don't (and shouldn't) import the individual pipes again in your other modules. Just remove it pletely from yourFavoritesPageModule
. – andypotato Commented Sep 2, 2019 at 4:32 -
@Jacquesジャック I did remove it from my page and this time says
ERROR Error: Uncaught (in promise): Error: Template parse errors: The pipe 'keepHtml' could not be found ("
– mafortis Commented Sep 2, 2019 at 4:33 - @mafortis I just posted an answer, hopefully it clears up any confusion. – Jacques Commented Sep 2, 2019 at 4:39
3 Answers
Reset to default 4Posting an answer to try and help explain some things.
As answered by others, you need to create a "shared" module of some kind. In your update, you've named it PipesModule
, so I will use that from here on.
Pipes Module:
import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';
@NgModule({
declarations: [
KeepHtmlPipe
],
imports: [],
exports: [
KeepHtmlPipe
]
})
Now, when you import this into any other module, you will automattically have access to KeepHtmlPipe
.
FavoritesPageModule:
import { PipesModule } from 'src/app/pipes/pipes.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
PipesModule,
RouterModule.forChild(routes)
],
declarations: [
FavoritesPage
]
})
export class FavoritesPageModule {}
Adding PipesModule
to the imports here gives you access to the KeepHtmlPipe
that was exported in the PipesModule
in any ponent declared in this module (IE: Part of the declarations
list).
favorites-page.ponent.html
<div [innerHTML]="product.stars | keepHtml"></div>
This should now work fine.
What you want to do is create a shared module, that your other modules can import. This was you can re-use ponents, pipes, module etc.. in any module!
You can do the following (you will have to remove KeepHtmlPipe
from the current module)
import { CommonModule } ...
import { NgModule } ...
import { KeepHtmlPipe } ...
// ...
@NgModule({
imports: [
CommonModule,
],
declarations: [
KeepHtmlPipe
],
exports: [
KeepHtmlPipe
]
})
export class SharedModule {}
!important
- you must export the KeepHtmlPipe
then in your app.module
import { SharedModule } from ...
// ...
imports: [
SharedModule
]
now you can use your pipe anywhere in your app, and in future if you want to add any more global pipes, directives or ponents they can go in this SharedModule
I remend to create a module containing all your global pipes, then import the module in your app module. Here's how you do it:
1) Create pipes.module.ts inside src/pipes folder
import { NgModule } from '@angular/core';
import { KeepHtmlPipe } from './keep-html.pipe';
@NgModule({
declarations: [
KeepHtmlPipe
],
imports: [],
exports: [
KeepHtmlPipe
]
})
export class PipesModule {}
2) In your app.module import the PipesModule and add it to the imports
collection
import { PipesModule } from '../pipes/pipes.module';
[...]
@NgModule({
declarations: [
MyApp
],
imports: [
[...]
PipesModule
],
[...]
Afterwards you can use your pipe anywhere in the app. If you add more global pipes later just also add it to your PipesModule.
本文标签: javascriptUsing angular pipe globallyStack Overflow
版权声明:本文标题:javascript - Using angular pipe globally - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742227438a2436587.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论