Angular 10: установить ввод URL-адреса IFrame с помощью переменной

Я пытаюсь установить исходный ввод IFrame с помощью компонента ниже.

По какой-то причине он не работает, не показывает веб-страницы. Как правильно настроить источник входного сигнала?

Способ вызова:

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

Типографический текст:

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

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

HTML:

<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>

Ошибка:

Ни один источник никогда не устанавливается,

введите здесь описание изображения

Ресурс: это только для Angular 1

Как установить атрибут src iframe из переменная в AngularJS


typescript angular iframe angular10
person Community    schedule 13.08.2020    source источник
comment
взгляните на этот ответ stackoverflow.com/a/50863439/8198889   -  person moqiyuanshi    schedule 14.08.2020

Ответы (1)


arrow_upward
2
arrow_downward

Да, по-прежнему небезопасно помещать что-либо в URL-адрес так же, как в Angular.js. Просто обойдите его — это будет все равно небезопасно, но ответственность возьмете на себя вы вместо разработчиков angular.

  constructor(public sanitizer: DomSanitizer) { }

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

пиши как [src]="urlSafe"

https://angular.io/api/platform-browser/DomSanitizer

person itspers    schedule 13.08.2020
comment
правильно ли я установил свои входные данные, кавычки и скобки? - person ; 14.08.2020
comment
Неважно, пока вы пытаетесь поместить случайную строку в src - angular этого не допустит. bypassSecurityTrustResourceUrl возвращает SafeResourceUrl, а не строку, поэтому не интерполируйте его, а поставьте как [src]=urlSafe - person itspers; 14.08.2020