Angular 7 - 延迟加载嵌套 material 选项卡

Question

在我的 angular-7 项目中，我试图制作一个带有嵌套 material 选项卡的 html 页面，其中第二个选项卡将有另一组选项卡。在第二个选项卡中，尝试为传递给子组件的数据制作 canvas 图表。

这是我的 html 代码。

<mat-tab-group mat-stretch-tabs [selectedIndex]="0">
    <mat-tab label="Sales"> Sales            
    </mat-tab>

    <mat-tab label="Purchase">
        <!-- <ng-template matTabContent>               //This block works but i want in tab format
            <div *ngIf="isReady " class="divinput ">
                <div *ngFor="let d of data">
                    <draw [input]="d "></draw>
                </div>
            </div>
        </ng-template> -->

        <mat-tab-group *ngIf="isReady">                   // this throws error
            <mat-tab *ngIf="isReady" label="north">
                <ng-template matTabContent>
                    <div *ngFor="let d of data">
                        <draw [input]="d"></draw>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

    </mat-tab>
</mat-tab-group>

以上代码调用了子组件"draw"，子组件具有绘制图表的功能

private draw (chart){ 
    var canvas = <HTMLCanvasElement> document.getElementById(chart.id);
    var ctx = canvas.getContext("2d");
    return new Chart(ctx, {
        type: 'line',
        data: {labels: chart.x,datasets: mydata}
    }) 
}

这会引发错误，TypeError: Cannot read property 'getContext' of null 函数绘制中的第 var ctx = canvas.getContext("2d"); 行。看起来 material-tabs 不等待数据可用。我试图通过 "isReady" 来处理这个问题，但没有成功。

我注意到一件奇怪的事，当我将 [selectedIndex]="0" 更改为 [selectedIndex]="1" 时它起作用了。但不能认为这是第一个选项卡应该根据要求在加载时处于活动状态。

我正在努力找出问题所在。请帮助解决问题。

Answer 1

in angular 具体来说你可以使用 ViewChild 而不是 getElementById 来获取 canvas

在 angular 7 中，具体工作方式如下

example

component.html

<canvas #chart></canvas>

component.ts

    import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';

    @Component({
      selector: 'app-draw',
      templateUrl: './draw.component.html',
      styleUrls: ['./draw.component.css']
    })
    export class DrawComponent implements OnInit {

      @ViewChild('chart')
      chartElementRef: ElementRef<HTMLCanvasElement>;

      @Input()
      input: any;

      constructor() { }

      ngOnInit() {
        this.draw();
      }

      private draw () { 
        const canvas = this.chartElementRef.nativeElement;
        const ctx = canvas.getContext("2d");
      }
    }

Angular 7 - 延迟加载嵌套 material 选项卡

Angular 7 - Lazy loading with nested material tabs

lazy-loading

angular-material

angular