大家好,我是新的 ionic 程序员,我目前正在开发一个使用 youtube api 的应用程序(显示来自单个 channel 的视频)。我按照教程进行操作,我正在做与他相同的事情,但我的遇到了这个错误。
The pipe 'youtube' could not be found
即使我按照教程所示创建并导入了 youtube 管道。 这些是我的代码
这是我的 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import {HttpModule} from '@angular/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {YoutubePipe} from './youtube.pipe';
@NgModule({
declarations:
[AppComponent, YoutubePipe],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
这是我的 youtube.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
@Pipe({
name: 'youtube',
})
export class YoutubePipe implements PipeTransform {
constructor(private dom: DomSanitizer) {
}
transform(value: string) {
console.log(this.dom.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + value ));
return this.dom.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + value);
}
}
这是我的 home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Videos
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-card *ngFor="let item of posts">
<ion-card-title>
{{item.snippet.title}}
</ion-card-title>
<ion-card-content>
<!--img [src]="item.snippet.thumbnails.high.url"/>-->
<iframe [src]="item.id.videoId | youtube" width="100%" height="315" frameborder="0" allowfullscreen></iframe>
</ion-card-content>
</ion-card>
</ion-content>
最后一个是我的home.page.ts
import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {NavController} from '@ionic/angular';
import {map} from 'rxjs/operators';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
search: String = 'ionic 4';
posts: any = [];
constructor(public navCtrl: NavController, public http: Http) {
const url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&channelId=UCHm8H-_IZMLl4-HYwrsvtNQ&maxResults=20&key=AIzaSyCQuzbBfetLjteTBAoSV3oCM3Mf_dstU6Q';
this.http.get(url).pipe(map(res => res.json())).subscribe(data => {
this.posts = this.posts.concat(data.items);
console.log(this.posts);
});
}
}
希望大家帮帮我。 谢谢
最佳答案
不要将您的管道导入 app.module.ts。而是创建一个名为 pipe.module.ts
的文件,其中包含以下代码:
import { NgModule } from '@angular/core';
import { YoutubePipe } from './youtube.pipe';
@NgModule({
declarations: [
YoutubePipe
],
imports: [],
exports: [
YoutubePipe
]
})
export class PipesModule {}
然后将此 PipesModule 导入到您使用管道的 home.module.ts
中。还要确保从 app.module.ts
中删除 import { YoutubePipe } from './youtube.pipe'
因为没有必要在应用程序中导入。模块.ts.
关于angular - 找不到自定义管道 ionic 4 |找不到管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54711029/