Angular 在同一onclick函数调用中使用ngIf时添加/删除子组件

我是个新手。请在这个场景中指导我。谢谢 我有一个父组件： parent.component.html

<app-child1 (chartClick)="showChild($event)"></app-child1>
<app-child2 (levelOneChartClick)="showLevelTwoChild($event)" *ngIf="!showFirst"></app-child2>

<div class="container my-3">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-10 col-md-10">
            <canvas id="pieElement" (click)="onChartClick($event)"></canvas>
        </div>
    </div>
</div>

<div class="container" >
    <div class="row justify-content-center" >
        <div *ngFor="let chart of array; let i = index">
            <canvas id="canvas{{i}}" #levelOneCanvas width="550" heigth="650" 
           (click)="onLevelOneChartClick($event,i)"></canvas> 
        </div>
    </div>
</div>

child1.component.html

<app-child1 (chartClick)="showChild($event)"></app-child1>
<app-child2 (levelOneChartClick)="showLevelTwoChild($event)" *ngIf="!showFirst"></app-child2>

<div class="container my-3">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-10 col-md-10">
            <canvas id="pieElement" (click)="onChartClick($event)"></canvas>
        </div>
    </div>
</div>

<div class="container" >
    <div class="row justify-content-center" >
        <div *ngFor="let chart of array; let i = index">
            <canvas id="canvas{{i}}" #levelOneCanvas width="550" heigth="650" 
           (click)="onLevelOneChartClick($event,i)"></canvas> 
        </div>
    </div>
</div>

child1.component.ts

export class ParentComponent implements OnInit {
  showFirst: boolean = true;
  ngOnInit() { }
  showChild = function (event) {
    this.showFirst = false;
   }
  showLevelTwoChild = function (event) {
    console.log("called once......");
    this.showFirst = true;
    setTimeout(function(){
      console.log("called second");
      this.showFirst = false;
      }, 5000);
  }

export class Child1Component implements OnInit, AfterViewInit {
  globals: Globals;
  @Output()
  chartClick: EventEmitter<any> = new EventEmitter<any>();


  dataSets = [];
  pieChartOptions;

  constructor(private globals: Globals,private chidl1Service: Child1Service) {}
  ngOnInit() {
    let self = this;
    let tempData = [];
    this.child1Service.getChild1Details().subscribe(data =>{
      //Subsccribing code goes here....
     // In here, get data from http service, and create a cumulative chart.
     }
    onChartClick(event: any) {
    this.chartClick.emit(event); //emmiting the event.
  }

  ngAfterViewInit(): void {}
}

export class Child2Component implements OnInit, AfterViewInit {
  @Output() levelOneChartClick: EventEmitter<any> = new EventEmitter<any>();
  @ViewChildren('levelOneCanvas') levelOneCanvas: QueryList<any>;
  array = [];
  constructor(private elementRef: ElementRef, private globals: Globals) {}
  ngOnInit() {
  }
 ngAfterViewInit(): void {}
 onLevelOneChartClick(event, index) {
    this.levelOneChartClick.emit(event);
 }

导出类child1组件实现OnInit，AfterViewInit{
globals：globals；
@输出（）
chartClick:EventEmitter=新的EventEmitter（）；
数据集=[]；
Piechart选项；
构造函数（私有全局：全局，私有chidl1Service:Child1Service）{}
恩戈尼尼特（）{
让自我=这个；
设tempData=[]；
this.child1Service.getChild1Details（）.subscribe（数据=>{
//订阅代码在这里。。。。
//在这里，从http服务获取数据，并创建一个累积图表。
}
onChartClick（事件：任意）{
this.chartClick.emit（事件）；//显示事件。
}
ngAfterViewInit（）：void{}
}

child1.component.html

<app-child1 (chartClick)="showChild($event)"></app-child1>
<app-child2 (levelOneChartClick)="showLevelTwoChild($event)" *ngIf="!showFirst"></app-child2>

<div class="container my-3">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-10 col-md-10">
            <canvas id="pieElement" (click)="onChartClick($event)"></canvas>
        </div>
    </div>
</div>

<div class="container" >
    <div class="row justify-content-center" >
        <div *ngFor="let chart of array; let i = index">
            <canvas id="canvas{{i}}" #levelOneCanvas width="550" heigth="650" 
           (click)="onLevelOneChartClick($event,i)"></canvas> 
        </div>
    </div>
</div>

chidl2.component.ts

export class ParentComponent implements OnInit {
  showFirst: boolean = true;
  ngOnInit() { }
  showChild = function (event) {
    this.showFirst = false;
   }
  showLevelTwoChild = function (event) {
    console.log("called once......");
    this.showFirst = true;
    setTimeout(function(){
      console.log("called second");
      this.showFirst = false;
      }, 5000);
  }

export class Child1Component implements OnInit, AfterViewInit {
  globals: Globals;
  @Output()
  chartClick: EventEmitter<any> = new EventEmitter<any>();


  dataSets = [];
  pieChartOptions;

  constructor(private globals: Globals,private chidl1Service: Child1Service) {}
  ngOnInit() {
    let self = this;
    let tempData = [];
    this.child1Service.getChild1Details().subscribe(data =>{
      //Subsccribing code goes here....
     // In here, get data from http service, and create a cumulative chart.
     }
    onChartClick(event: any) {
    this.chartClick.emit(event); //emmiting the event.
  }

  ngAfterViewInit(): void {}
}

export class Child2Component implements OnInit, AfterViewInit {
  @Output() levelOneChartClick: EventEmitter<any> = new EventEmitter<any>();
  @ViewChildren('levelOneCanvas') levelOneCanvas: QueryList<any>;
  array = [];
  constructor(private elementRef: ElementRef, private globals: Globals) {}
  ngOnInit() {
  }
 ngAfterViewInit(): void {}
 onLevelOneChartClick(event, index) {
    this.levelOneChartClick.emit(event);
 }

导出类Child2组件实现OnInit，AfterViewInit{
@Output（）levelOneChartClick:EventEmitter=新的EventEmitter（）；
@ViewChildren（'levelOneCanvas'）levelOneCanvas:QueryList；
数组=[]；
构造函数（private-elementRef:elementRef，private-globals:globals）{}
恩戈尼尼特（）{
}
ngAfterViewInit（）：void{}
onLevel图表单击（事件、索引）{
此.levelOneChartClick.emit（事件）；
}

Parent.component.html文件有两个子组件。第一个子组件将进行http调用并显示图表。单击该图表，将使用子组件2显示其子组件图表。 单击图表2后，图表2将变为图表1，图表3的内容必须在child2中创建。 我的理解是：点击图表2，我可以用图表1更新图表2数据，并从dom中删除图表2数据。我不必销毁图表和其他内容。经过一定时间后，图表3数据将填充到child2组件中，该事件发射器具有settimeout功能。 在child2.component.ts文件中，使用levelOneChartClick发出事件。我想从dom中删除child2，并在一定时间后重新添加它。这可能吗？在parent.component.ts文件的showLevelTwoChild方法中，包含了一个setTimeout方法。但它不起作用。如果问题不清楚或需要更多信息，请告诉我这是我能提供的。 故意不添加一些不需要的内容

---

关于“levelOneCanvas”模板引用变量的另一个问题，第一次只有4个图表将显示在child2组件上。在使用ngIf从dom中删除它们之后，当我访问levelOneCanvas模板引用变量时，仍然显示相同的内容。有没有办法重置它？

有人能帮上忙吗？你能做一个stackblitz吗