Angular 角度10：使用变量设置IFrame URL输入

我正在尝试使用下面的组件设置IFrame源输入

由于某种原因，它不起作用，没有显示网页。如何正确设置输入源

调用方法：

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

HTML:

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

  @Input() url1: string;
  @Input() url2: string;
  
  ngOnInit(): void {
  }
}

<div class="box">
  <iframe class="iframe-one" src="{{url1}}" frameborder="0"
    scrolling="yes" align="left"> </iframe>
</div>

<div class="box">
  <iframe class="iframe-two" src="{{url1}}" frameborder="0"
    scrolling="yes" align="right"></iframe>
</div>

错误：

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

没有来源被设置

资源：这仅适用于角度1

---

是的，将任何内容放入与Angular.js相同的url中仍然是不安全的。只需绕过它-它仍然是不安全的，但您将承担责任，而不是开发人员

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

写为

[src]=“urlSafe”

---

我是否正确设置了输入、引号和括号？当您尝试将随机字符串放入src时，这无关紧要-angular将不允许这样做。bypassSecurityTrustResourceUrl返回SafeSourceUrl，而不是字符串，所以不要插入它，而是像[src]=“urlSafe”一样，看看这个答案