Question

我的问题与此answer不同，我的问题是该组件使用ngif = true初始化，但是我可以选择通过应用false将其删除，到目前为止效果很好，但是内容不会再次呈现，因为ngAfterViewInit不再被调用，我再次遇到角度问题，我不知道角度生命周期。 总结，我的问题是如何使用ngIF进行删除和添加以及呈现组件的内容。

初始化组件 openGraph5 = true;

component.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)
  }
}

component.html

<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

在将ngif应用于已安装的组件后，不渲染子级

0 个答案: