#angular #iframe #angular2-changedetection
#angular #iframe #angular2-обнаружение изменений
Вопрос:
У меня действительно странная проблема: у меня очень простой компонент ( ViewerComponent
). Там не так много логики, передается только URL-адрес для отображения URL-адреса (средства просмотра) в iFrame. Это HTML выглядит следующим образом:
<iframe class="w-100 h-100 border-0" [src]="viewerUrl | safe: 'resourceUrl'"></iframe>
safe
Канал — это просто средство очистки DOM.
Проблема в том, что iFrame постоянно перерисовывается. Кажется, что он перерисовывается в каждом цикле обнаружения изменений. Но, что странно, viewerUrl
никогда не изменяется.
Кроме того, компонент не уничтожается (я проверяю это в ngOnDestroy()
, но он никогда туда не попадает. Чтобы сделать это еще более странным, changeDetection
установлено значение OnPush
, а также не зарегистрировано никаких изменений (проверка ngOnChanges()
).
Кстати, это приложение Angular 10. Может быть, это какая-то ошибка, связанная с этим?
Любая помощь была бы очень, очень признательна!
@Update:
Пожалуйста, смотрите безопасный канал здесь:
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html':
return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style':
return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script':
return this.sanitizer.bypassSecurityTrustScript(value);
case 'url':
return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default:
throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
Комментарии:
1. является ли канал чистым каналом? может ли быть так, что выполняется обнаружение изменений в канале и является причиной перезагрузки для iframe?
2. Что канал делает с дополнительным параметром?
3. Хороший момент с каналом, я это проверю. Я также опубликую его содержимое в своем сообщении, дайте мне минуту.
Ответ №1:
Я разобрался с проблемой. Он был подключен к каналу, потому что канал создал новый экземпляр объекта, что означает эту строку.
Я исправил проблему, введя src
параметр следующим образом:
const iframe = this.elementRef.nativeElement.querySelector('iframe');
iframe.src = url;
url
Уже был преобразован каналом сохранения следующим образом:
this.safePipe.transform(url, 'resourceUrl');