如何正确嵌入youtube iframe到Angular2视图？获得不安全的价值错误 [英] How to correctly embed youtube iframes into Angular2 view? Getting unsafe value error

问题描述

EXCEPTION：./ HomeComponent类中的错误HomeComponent - 内联模板：23：84由以下原因引起：资源URL上下文中使用的不安全值

我的homeData模型

  {id：1，title：'2017 Super Bowl'， graphic：'https://wikitags.com/images/SuperBowlBanner.png'，
类别卡：[
 {
类型：视频，
 url：'https：/ /www.youtube.com/embed/9Egf5U8xLo8?rel=0&controls=0&showinfo=0', 
 title：2017 Super Bowl Commercials，
商品详情：[Netflix ，Nintendo，Intel，Ford，Wendy's] 
}，
  

标记：home.component.html

 < div class =container col-lg-3 col-md -6 col-sm-12* ngFor =let category.categorycards> 
< div class =thumbnail> 
< a href =/ wiki / entity* ngIf =card.type =='image'> 
< div class =image-wrap> 
< img [src] =card.graphicclass =img-responsivealt =[card.title]title =[card.title]> 
< / div> 
< / a> 
 
< a href =/ wiki / category* ngIf =card.type =='video'> 
< div class =image-wrap> 
< iframe title =YouTube视频播放器
 class =youtube-player
 type =text / html
 [src] =card.urlheight =100％width =100％frameborder =0>< / iframe> 
< / div> 
< / a> 
  

我发现

解决方案

更改 Sanitizer 到 DomSanitizer 。

您注入了相同的实例，但IDE没有显示任何警告。

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'.

解决方案

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

这篇关于如何正确嵌入youtube iframe到Angular2视图？获得不安全的价值错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！