Блог

Главная - Вопросы по программированию - IFrame постоянно перерисовывается в компоненте Angular

IFrame постоянно перерисовывается в компоненте Angular

#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');