Загрузка фрейма бесконечно угловая 2 - PullRequest
Новая
       36

Загрузка фрейма бесконечно угловая 2

0 голосов
/ 11 декабря 2018

Я пытаюсь создать действительно простой проект Iframe в Angular 2. Код

Если я использую raw url в iframe src, получим ошибку unsafe value used in a resource URL context

<!-- 1) Error : unsafe value used in a resource URL context -->
<iframe (load)="yourLoadFunction()" [src]="'/'" frameborder="0" width="1000px" height="500px"></iframe>

Если я использую DomSanitizer.bypassSecurityTrustResourceUrl для очистки URL, это работает, ноИфрейм загружается бесконечное время, странно хммм. Код (проверьте консоль) 

<!-- 2) Infinite loop Iframe loading  -->
<iframe (load)="yourLoadFunction()" [src]="sanitizer.bypassSecurityTrustResourceUrl('/')" frameborder="0" width="1000px" height="500px"></iframe>

Итак, я создал канал для URL, как показано ниже, и он работает без проблем

safe-url.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

HTML View 

 <!-- 3)  Working with pipe -->
 <iframe (load)="yourLoadFunction()" [src]="'/' | safeUrl" frameborder="0" width="1000px" height="500px"></iframe>

Теперь у меня есть вопросы

  • Почему ошибка unsafe value used in a resource URL context в угловых, где работает простой HTML iframe

  • Почему DomSanitizer.bypassSecurityTrustResourceUrl вызывает бесконечную загрузку iframe, но не pipe с той же функцией

1 Ответ

0 голосов
/ 11 декабря 2018

Поскольку при передаче метода в привязку шаблона метод вызывается при каждом цикле обнаружения изменений.

Angular не может видеть, является ли значение, возвращаемое методом в разметке, таким же, как было раньшефактически не вызывая его.

Возвращает SafeResourceUrl, который, как мне кажется, содержит метаданные, которые могут изменяться при каждом вызове.

Трубы, с другой стороны, не будутвызывается снова, если только значение input не изменилось.

Поэтому обычно предпочтительнее не привязывать вызовы метода непосредственно к входному значению.

...