Нестандартная труба не найдена ионной 4 |труба не найдена

Question

Привет, ребята, я новый ионный программист, я в настоящее время разрабатываю приложение, которое использует YouTube API (показывать видео с одного канала).Я следовал учебному пособию, и я делаю то же самое, что и он, но мины получают эту ошибку.

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

А этот мой дом.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);
});

}

}

Надеюсь, вы, ребята, можете мне помочь.Спасибо

Answer 1

У меня есть следующее решение, чтобы использовать трубу cutom в компоненте в Ionic 4. Удалите трубу из app.module.ts

Импортируйте трубу в свой модуль страницы.например, home.module.ts

import { CustomPipe } from '../../app/custom.pipe';

Добавьте это к объявлениям в home.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  entryComponents: [NewssliderComponent],
  declarations: [HomePage, CustomPipe, NewssliderComponent]
})

Вы можете использовать канал в файле newsslider.component.html

{{e.publish | CustomPipe}}

Answer 2

Не импортируйте свою трубу в 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, где вы используете канал.Также обязательно удалите import { YoutubePipe } from './youtube.pipe' из app.module.ts, так как нет необходимости импортировать этот файл в app.module.ts.