1

我想创建一个处理所有 YouTube 嵌入视频的组件。但是，将 src 作为变量传递根本不起作用。不管我做什么。任何人都知道问题是什么，还是需要修复的角度错误？

我在父模板中有这个

   <ng-container *ngFor="let link of youtubeUrlList">
     <app-youtube-card [url]="link"></app-youtube-card>
   </ng-container>

子组件模板是：

 <iframe [src]="safeSource"></iframe>

在子组件类中：

 export class YoutubeCardComponent implements OnInit {

   @Input() url?: string  
   safeSource?: SafeResourceUrl
   constructor(private sanitizer: DomSanitizer) { }
  
   ngOnInit(){
     this.safeSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
   }
 }

并得到这个错误

core.js:6456 ERROR TypeError: t.replace is not a function
    at HTMLIFrameElement.set (<anonymous>:5:5482)
    at EmulatedEncapsulationDomRenderer2.setProperty (platform-browser.js:739)
    at elementPropertyInternal (core.js:10006)
    at Module.ɵɵproperty (core.js:14764)
    at YoutubeCardComponent_ng_container_1_Template (youtube-card.component.html:3)
    at executeTemplate (core.js:9579)
    at refreshView (core.js:9445)
    at refreshEmbeddedViews (core.js:10570)
    at refreshView (core.js:9469)
    at refreshComponent (core.js:10616)

但是，如果我将任何 YouTube 链接直接放在 iframe 源属性中，我不会收到该错误

4

1 回答 1

3

我遇到了同样的错误，它是由 Chrome 扩展程序引起的，该扩展程序以某种方式与幕后的 iframe 交互。

在 Chrome 隐身或访客模式下，我的代码运行良好，只有在扩展程序处于活动状态时我才会遇到问题。

您应该尝试禁用所有 Chrome 扩展程序。

于 2021-11-04T14:59:33.780 回答