Angular2-我应该如何使用Angular2实现Google即时预览？

我正在尝试在我的Angular项目上实现Google即时预览。但是，当我使用

iframe

标记时，它不会显示任何内容

html代码-

<div class="text-result" *ngIf="Display('all')">
                <div *ngFor="let item of items$|async" class="result">
                    <div class="title">
                        <a href="{{item.link}}">{{item.title}}</a>
                        <div class="box">
                            <iframe src="{{item.link}}" width="500px" height="500px"></iframe>
                        </div>
                    </div>
                    <div class="link">
                        <p>{{item.link}}</p>
                    </div>
                    <div>
                        {{item.pubDate|date:'fullDate'}}
                    </div>
                </div>
            </div>

---

为了避免XSS攻击，angular不允许动态绑定到iframe的

src

属性。您可以使用该类来允许url。 您需要注入并使用

bypassSecurityTrustResourceUrl

方法

构造函数（domsanizer:domsanizer）{
让url=”http://some-random-url.tld";
this.myUrl=this.domsanizer.bypassSecurityTrustResourceUrl（url）；
}

在模板中：

---

为了避免XSS攻击，angular不允许动态绑定到iframe的

src

属性。您可以使用该类来允许url。 您需要注入并使用

bypassSecurityTrustResourceUrl

方法

构造函数（domsanizer:domsanizer）{
让url=”http://some-random-url.tld";
this.myUrl=this.domsanizer.bypassSecurityTrustResourceUrl（url）；
}

在模板中：

感谢您抽出时间回答我的问题。实际上，我正在从web服务获取结果。因此，为了获取链接，我使用

{{item.link}

。正如您所说，我可以将其写成

let url=“{{item.link}”

？或者我必须这样写-

let url=”http://web-service-url.tld“

我不知道你的代码，所以可能吧。只要将

SafeResourceUrl

而不是

string

传递给iframes的

src

，您就可以做您想做的事。感谢您抽出时间回答我的问题。实际上，我正在从web服务获取结果。因此，为了获取链接，我使用

{{item.link}

。正如您所说，我可以将其写成

let url=“{{item.link}”

？或者我必须这样写-

let url=”http://web-service-url.tld“

我不知道你的代码，所以可能吧。只要将

SafeResourceUrl

而不是

string

传递给iframes的

src

，您就可以随心所欲。

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}