title: Angular4 ngAfterViewChecked invoked multiple times when using setTimeout
body: <p>I have a service that I want to call once a view has been fully rendered. I did some digging around and found the Angular lifecycle. It seemed that the best method for me to use was <code>AfterViewChecked</code>, so I updated my <strong>AppComponent</strong> and added:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, AfterViewChecked } from "@angular/core";
  import { ActivatedRoute, Params } from "@angular/router";
  
  import { ResultsService } from "./shared/results.service";
  import { HeightService } from "./shared/height.service";
  
  @Component({
    selector: 'bzRoot',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit, AfterViewChecked {
  
    constructor(
      private _activatedRoute: ActivatedRoute,
      private _resultsService: ResultsService,
      private _heightService: HeightService
    ) { }
  
    ngOnInit() {
      this._activatedRoute.queryParams.subscribe((params: Params) =&gt; this._resultsService.elq = params['elq']);
    }
  
    ngAfterViewChecked() {
      console.log('hi');
    }
  }
  </code></pre>
  
  <p>When I run my application, I can see that the console has 25 instances of "hi" in it. I have no idea why it is so many, but that isn't the issue.
  My method is calling a service I created which uses <code>postMessage</code> to send a message to the parent window. It looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class HeightService {
  
    constructor() { }
  
    public resize() {
      console.log('resizing');
  
      var body = document.body,
          html = document.documentElement;
  
      var height = Math.max( 
        body.scrollHeight, 
        body.offsetHeight, 
        body.clientHeight, 
        html.offsetHeight
      );
  
      setTimeout(function () {
        parent.postMessage(height, '*');
      }, 0);
    }
  }
  </code></pre>
  
  <p>And my <code>ngAfterViewChecked</code> method now looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngAfterViewChecked() {
    this._heightService.resize();
  }
  </code></pre>
  
  <p>If I comment out the <code>setTimeout</code> line, it goes back down to 25 invocations.
  Does anyone know why and how I can stop it from happening?</p>