Чтобы Angular не перезагружал содержимое iframe, вы можете попробовать следующие методы:
-
Используйте библиотеку
ngx-iframe-resizer: эта библиотека предоставляет директиву, которая позволяет динамически изменять размер iframe в зависимости от их содержимого. Используя эту директиву, вы можете запретить Angular перезагрузку содержимого iframe при повторной визуализации родительского компонента. -
Используйте
ng-containerсngIf: вместо непосредственного размещения iframe в шаблоне вы можете обернуть его внутриng-containerи условно отобразить его с помощью директивыngIf. Таким образом, при повторной визуализации родительского компонента iframe не будет уничтожен и перезагружен. -
Выделение iframe в дочерний компонент. Переместите iframe в отдельный дочерний компонент и используйте стратегию обнаружения изменений
ChangeDetectionStrategy.OnPushдля этого компонента. Эта стратегия гарантирует, что дочерний компонент проверяется на наличие изменений только при изменении его входных свойств, предотвращая ненужные перезагрузки. -
Храните содержимое iframe в решении по управлению службой или состоянием. Вместо непосредственного внедрения iframe в шаблон вы можете хранить содержимое iframe в решении по управлению службой или состоянием (например, NgRx или Redux). При этом содержимое сохранится, даже если родительский компонент будет повторно отображаться.
-
Отключить обнаружение изменений для компонента iframe. Вы можете явно отключить обнаружение изменений для компонента, содержащего iframe, используя
ChangeDetectorRefи вызываяdetach()метод. Это не позволит Angular обнаружить изменения в компоненте и перезагрузить iframe.