How to correctly embed youtube iframes into Angular2 view? Getting unsafe value error

问题

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:23:84 caused by: unsafe value used in a resource URL context

My homeData model

{ id: 1, title: '2017 Super Bowl', graphic: 'https://wikitags.com/images/SuperBowlBanner.png',
  categorycards: [
    {
        type: "video",
        url: 'https://www.youtube.com/embed/9Egf5U8xLo8?rel=0&controls=0&showinfo=0',
        title: "2017 Super Bowl Commercials",
        listings: ["Netflix", "Nintendo", "Intel", "Ford", "Wendy's"]
    },

The markup: home.component.html

<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" height="100%" width="100%" frameborder="0"></iframe>
        </div>
    </a>

I found this answer here.

However when I tried to create the saferesourceurl.pipe.ts file got this error:

Property 'bypassSecurityTrustResourceUrl' does not exist on type 'Sanitizer'.

回答1:

Change Sanitizer to DomSanitizer.
You get injected the same instance, but the IDE doesn't show any warnings.

来源：https://stackoverflow.com/questions/42677276/how-to-correctly-embed-youtube-iframes-into-angular2-view-getting-unsafe-value