Javascript 在angular 6中调整窗口大小或丢失焦点时，如何防止重新渲染

我在Angular 6.0.8中有一个组件，它只包含一个iframe

page.component.html：

<iframe [src]="url">

现在，当我调整窗口大小或在组件外单击鼠标（失去焦点）时，angular将重新渲染它（生命周期挂钩显示：DoCheck、AfterContentChecked、AfterViewChecked）

浏览器将再次请求iframe中的url，这不是我所希望的

---

如何防止这种行为？

最推荐的方法之一（不是解决这个具体问题，而是解决所有不必要的重新加载）是在推送时使用更改检测策略（

ChangeDetectionStrategy.OnPush

）

默认情况下，Angular使用

ChangeDetectionStrategy。默认情况下

ChangeDetectionStrategy

默认策略不会对应用程序进行任何假设，因此，每当应用程序中的某些内容发生变化时（由于各种用户事件、计时器、XHR、承诺等），所有组件上都会运行变化检测

这意味着，从单击事件到从ajax调用接收的数据，都会触发更改检测

推送更改检测策略

我们可以将组件的ChangeDetectionStrategy设置为ChangeDetectionStrategy.OnPush

示例：

@Component({
  selector: 'tooltip',
  template: `
   <h1>{{config.position}}</h1>
    {{runChangeDetection}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

@组件({
选择器：“工具提示”，
模板：`
{{config.position}}
{{runChangeDetection}}
`,
changeDetection:ChangeDetectionStrategy.OnPush
})

@Component({
  selector: 'tooltip',
  template: `
   <h1>{{config.position}}</h1>
    {{runChangeDetection}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})