Javascript 将画布调整为其父元素离子网格

我正在Ionic 3中构建一个组件，该组件放置一个图像网格，并用画布覆盖层连接它们。我使用了爱奥尼亚的

离子网格

，但当我尝试调整画布大小时，我找不到容器的正确尺寸，因此画布容器保持其初始大小。我想让它动态，所以我需要画布具有与网格容器相同的大小。这是我的密码：

    <ion-content>
  <ion-card>
    <div ion-card-content>

        <div ion-grid id= "container-graph">
           <ion-row responsive-sm>
            <canvas id="connection-canvas" style="position: absolute;"></canvas>
          </ion-row>
          <ion-row responsive-sm>
            <ion-col col-6 text-center>
              Generation
              <img id="generation" src="../../assets/img/solar-panel.png">
            </ion-col>
            <ion-col col-6 text-center>
              Grid
              <img id="grid" src="../../assets/img/grid.png">
            </ion-col>
          </ion-row>
          <ion-row responsive-sm>
            <img id="inverter" src="../../assets/img/logo.png">
          </ion-row>
          <ion-row responsive-sm>
            <ion-col col-6 text-center>
              Battery
              <img id="battery" src="../../assets/img/battery.png">
            </ion-col>
            <ion-col col-6 text-center>
              Consumption
              <img id="consumption" src="../../assets/img/house.png">
            </ion-col>
          </ion-row>
        </div>
    </div>
  </ion-card>
  <ion-card>
    <ion-card-content>
      {{description}}
    </ion-card-content>
  </ion-card>
</ion-content>





public drawGraphs (center:string, a:string, b:string, c:string, d:string){
    var canvas: any = document.getElementById("connection-canvas");
    var connectionGraph: any = document.getElementById("container-graph");
    canvas.width = connectionGraph.clientWidth;
    canvas.height = connectionGraph.clientHeight;
    var elCenter = document.getElementById(center);
    var contCenter = elCenter.getBoundingClientRect();
    var elA = document.getElementById(a);
    this.drawLine(elCenter,elA);
    var elB = document.getElementById(b);
    this.drawLine(elCenter,elB);
    var elC = document.getElementById(c);
    this.drawLine(elCenter,elC);
    var elD = document.getElementById(d);
    this.drawLine(elCenter,elD);


  }

一代
网格
电池
消耗
{{description}}
公共绘图（中心：字符串、a:字符串、b:字符串、c:字符串、d:字符串）{
var canvas:any=document.getElementById（“连接画布”）；
var connectionGraph:any=document.getElementById（“容器图”）；
canvas.width=connectionGraph.clientWidth；
canvas.height=connectionGraph.clientHeight；
var elCenter=document.getElementById（中心）；
var contCenter=elCenter.getBoundingClientRect（）；
var elA=document.getElementById（a）；
这是一条拉丝（elCenter，elA）；
var elB=document.getElementById（b）；
本图为抽绳（elCenter，elB）；
var elC=document.getElementById（c）；
这条吊线（elC中心、elC）；
var elD=document.getElementById（d）；
这条吊线（elCenter，elD）；
}

我刚刚找到了一个可行的解决方案。在使用lifecycle钩子界面对视图进行完全渲染后，我调用函数“drawgraphs”，检查后查看。

---

我刚刚找到了一个可行的解决办法。在使用lifecycle钩子界面对视图进行完全渲染后，我调用函数“drawgraphs”，检查后查看。

ngAfterViewChecked(){
    this.drawGraphs("inverter", "generation", "grid", "battery", "consumption")}