如何正确嵌入youtube iframe到Angular2视图？获得不安全的价值错误

Question

  

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

我的homeData模型

{ 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"]
    },

标记：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>

我找到了this answer here。

然而，当我尝试创建saferesourceurl.pipe.ts文件时出现此错误：

  

属性'bypassSecurityTrustResourceUrl'在'Sanitizer'类型中不存在。

Answer 1

将public class Node<T> { private List<Node<T>> children = new ArrayList<Node<T>>(); private Node<T> parent = null; private T data = null; public Node(T data) { this.data = data; } public Node(T data, Node<T> parent) { this.data = data; this.parent = parent; } public List<Node<T>> getChildren() { return children; } public void setParent(Node<T> parent) { parent.addChild(this); setParentInternal(parent); } public void setParentInternal(Node<T> parent){ this.parent = parent; } public void addChild(T data) { addChild(new Node<T>(data)); } public void addChild(Node<T> child) { child.setParentInternal(this); this.children.add(child); } //may not use this and set data public T getData() { return this.data; } public void setData(T data) { this.data = data; } public boolean isRoot() { return (this.parent == null); } public boolean isLeaf() { if(this.children.size() == 0) return true; else return false; } public void removeParent() { this.parent = null; } 更改为Sanitizer 您将注入相同的实例，但IDE不会显示任何警告。