1

コンポーネントがブートストラップのモーダル ダイアログで表示されると、1 秒あたり数回再レンダリングされ続けます。（ブラウザの開発者ツールで確認できます）。

コンポーネントは次のようになります。

@Component({
  selector: 'app-takeover',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `

<iframe #iframe 
        [src]="sanitizer.bypassSecurityTrustResourceUrl(takeover.IframeUrl)"
        sandbox="allow-same-origin" 
        (load)="iframe_load($event)">
</iframe>

   `,
})
export class TakeoverComponent {

  constructor(
     public sanitizer: DomSanitizer
  ) { }

  takeover: Takeover;

  @ViewChild('iframe') iframeRef: ElementRef<HTMLIFrameElement>;

  iframe_load(event) { }
}

そして、私はそれを次のように示します:

let modalRef = this.modalService.open(TakeoverComponent);
let component = modalRef.componentInstance as TakeoverComponent;
component.takeover = takeover;

テンプレートから (load)="iframe_load($event)" を削除すると、期待どおりに一度だけレンダリングされます。

DOM を再レンダリングし続けるのはなぜですか? また、そうしないようにするにはどうすればよいですか?

"@angular/core": "~7.2.0", "@ng-bootstrap/ng-bootstrap": "^4.2.1", "zone.js": "~0.8.26"

4

1 に答える 1