找不到管道"safeResourceUrl" [英] The pipe 'safeResourceUrl' could not be found

问题描述

正在努力解决一些安全性错误，因为我试图将youtube视频动态地嵌入到Angular 2应用中.在此处找到有关使用Pipe清理URL的答案.

Working on solving some security errors since I'm trying to dynamically embed youtube videos into my Angular 2 app. Found this answer here regarding the use of a Pipe to sanitize the url.

但是遇到当前错误.

找不到管道'safeResourceUrl'

The pipe 'safeResourceUrl' could not be found

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeResourceUrl'})
export class SafeResourceUrl {
    constructor(private sanitizer:DomSanitizer){}

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

我已将其导入到我的app.module

import { NgModule } from '@angular/core';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SafeResourceUrl } from './shared/pipes/saferesourceurl.pipe';

@NgModule({
    declarations: [
        AppComponent,
        SafeResourceUrl
    ],
    imports: [
        SharedModule,
        HomeModule,
        AppRoutingModule
    ]
})

并导入到我的home.component.ts

import { SafeResourceUrl } from '../shared/pipes/saferesourceurl.pipe';

<div class="container col-lg-3 col-md-6 col-sm-12" *ngFor="let card of category.categorycards">
<div class="thumbnail">
    <a href="/wiki/entity" *ngIf="card.type == 'image'">
        <div class="image-wrap">
            <img [src]="card.graphic" class="img-responsive" alt="[card.title]" title="[card.title]">
        </div>
    </a>

    <a href="/wiki/category" *ngIf="card.type == 'video'">
        <div class="image-wrap">
            <iframe title="YouTube video player"
                    class="youtube-player" type="text/html" 

                    [src]="card.url | safeResourceUrl"

                    height="100%" width="100%" frameborder="0"></iframe>
        </div>
    </a>

推荐答案

无法在全球范围内使用管道.无论它们在哪里使用，都需要将它们导入，与组件或指令相同.

Pipes can't be made available globally. They need to be imported wherever they are used, the same as components or directives.

@NgModule({
    declarations: [
        SafeResourceUrl
    ],
    imports: [
      CommonModule
    ]
})
class SharedModule {

@NgModule({
    declarations: [
      CommonModule,
      HomeComponent,
    ],
    imports: [
        SharedModule,
    ]
})
class HomeModule

这篇关于找不到管道"safeResourceUrl"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！