Angular6:通过@Input将URL传递到组件中并在iframe中使用它

时间:2018-07-24 02:56:55

标签: variables url input angular6 angular-dom-sanitizer

我为嵌套的Video容器创建了Angular6 CLI组件。它适用于像这样的初始硬编码值...

类导出中的

.ts文件:

sThisURL:string = "https://player.vimeo.com/video/xxxxxxx?autoplay=1";
VidLink=this.sanitizer.bypassSecurityTrustResourceUrl(this.sThisURL);

.html文件:

<iframe class="iframe" [src]="VidLink" frameborder="0" allowfullscreen></iframe>

这一切都很好。现在,我将以下行添加到.ts中,并对VidLink行进行以下更改以使用传入的URL,即相同的字符串...

更新的.ts文件:

@Input() vidURL: string;
//sThisURL:string = "https://player.vimeo.com/video/267505597?autoplay=1";
VidLink=this.sanitizer.bypassSecurityTrustResourceUrl(this.vidURL);

我可以console.log输入值,它的确是一个字符串,并且与字符串sThisURL相同。但是,它会呈现HTML主体(而不是实际视频)的“框架内框架”错误。

如何像声明的字符串一样使用传入的字符串?

0 个答案:

没有答案