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

Question

我是角度的新手。请在这种情况下指导我。谢谢。我有一个父组件：parent.component.html

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

父组件.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);
  }

child1.component.html

<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>

child1.component.ts

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 {}
}

child1.component.html

<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 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);
 }

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

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

标签： angulartypescript