在ngif应用于已装入的组件后不呈现子级

我的问题和这个不同 answer ,我的问题是组件初始化时使用ngif=true,但我可以通过应用false来删除它,到目前为止还不错,但内容不会再次呈现,因为ngAfterViewInit没有再次调用,我再次使用angular,我不知道angular的生命周期。

初始化组件 openGraph5=真;

组件.ts

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, ContentChild } from '@angular/core';
import { ChartDataSets, ChartOptions, Chart } from 'chart.js';

@Component({
  selector: 'app-line-charts',
  templateUrl: './line-charts.component.html',
  styleUrls: ['./line-charts.component.scss']
})
export class LineChartsComponent implements OnInit {
  @Input() openGraph5: Boolean;
  @Output() openGraph5Change: EventEmitter<Boolean> = new EventEmitter<Boolean>();
  @ViewChild('idmyChartSLine') idmyChartSLine: ElementRef;

  public donuctx: any;
  public chart: any;
  public plugin: any;
  constructor() {}

  ngOnInit() {

  }
  ngAfterViewInit(){
    this.donuctx = this.idmyChartSLine.nativeElement.getContext('2d')
    this.chart = new Chart(
      this.donuctx,
      {
          type: 'line',
          data: {
            labels: [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
            datasets: [{ 
                data: [86,114,106,106,107,111,133,221,783,200],
                label: "Africa",
                borderColor: "#3e95cd",
                fill: false
              }, { 
                data: [282,350,411,502,635,809,947,1402,1700,900],
                label: "Asia",
                borderColor: "#8e5ea2",
                fill: false
              }, { 
                data: [168,170,178,190,203,276,408,547,675,734],
                label: "Europe",
                borderColor: "#3cba9f",
                fill: false
              }, { 
                data: [40,20,10,16,24,38,74,167,508,784],
                label: "Latin America",
                borderColor: "#e8c3b9",
                fill: false
              }, { 
                data: [6,3,2,2,7,26,82,172,312,433],
                label: "North America",
                borderColor: "#c45850",
                fill: false
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: 'Line Bar Bar'
            }
          }            
      }
    );
  }
  public change(): void{
    this.openGraph5Change.emit(false)
  }
}

<div class="ChartsLine" *ngIf="openGraph5">
    <div class="canvasContainer">
            <canvas #idmyChartSLine>

            </canvas>
        </div>
        <div class="controlPanel">

        </div>
    <button class="btnFechar" (click)="change()">
            <img class="btnIcon" src="/assets/close.svg" alt="btn">
    </button>
</div>

成分父

  <button value='graph5' *ngIf="!openGraph5" (click)="changeBtn($event)">Graphs5</button>  
  <app-line-charts [openGraph5]="openGraph5" (openGraph5Change)="receiveChangeOpenGraph5($event)"></app-line-charts> 

Code Sanbox mvp