需要設置Angular2畫布以填充父元素

Question

我正在編寫一個應用程序，使用Ionic framework，我想製作一個填充內容區域的畫布。爲了說明這一點，我想爲我的畫布，以填補藍內容框如下圖所示：

我的容器模板

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Compose</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <note-canvas padding></note-canvas> 

</ion-content> 

而這裏的NoteCanvas分量+模板：

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

@Component({ 
    selector: 'note-canvas', 
    template: ` 
    <canvas layout-fill #noteCanvas 
    [attr.width]='x' 
    [attr.height]='y' 
    [class]='sc'> 
    </canvas> 
    ` 
}) 


export class NoteCanvas { 
    private x: number; 
    private y: number; 
    private sc: String = 'fixed-content' 

    @ViewChild("noteCanvas") noteCanvas: ElementRef; 

    constructor() { 

    } 

    ngOnInit() { 
     this.draw() 
    } 

    ngAfterViewInit() { 

     let canvas = this.noteCanvas.nativeElement 

     let ctx = canvas.getContext('2d') 

     for (var i = -2; i < 3; i++) { 
      var y = (500/2) + (i * 75) 
      ctx.beginPath() 
      ctx.fillStyle = "#000" 
      ctx.moveTo(0, y) 
      ctx.lineTo(500, y) 
      ctx.stroke() 
      console.dir(ctx) 
     } 


    } 

    draw() { 
     console.log(this.noteCanvas.nativeElement.parentNode.parentNode) 
     this.x = this.noteCanvas.nativeElement.parentNode.parentNode.clientWidth 
     this.y = this.noteCanvas.nativeElement.parentNode.parentNode.clientHeight 
    } 


} 

因此，我差不多ge t我想要的結果，但它總是太大，並且從來沒有考慮到橙色邊緣。如下圖所示，你可以看到，有一個垂直型溢出：

任何人能提供任何智慧？我確實對Angular2有了一個模糊的理解，但是我找不到能夠在線解決我的問題的東西。我很樂意詳細說明任何事情！

Answer 1

唉...我發現，工作一個真正哈克的方法：

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

@Component({ 
    selector: 'note-canvas', 
    template: ` 
    <canvas layout-fill #noteCanvas 
    [attr.width]='x' 
    [attr.height]='y' 
    [class]='sc'> 
    </canvas> 
    ` 
}) 


export class NoteCanvas { 
    private x: number; 
    private y: number; 
    private sc: String = 'fixed-content' 

    @ViewChild("noteCanvas") noteCanvas: ElementRef; 

    constructor() { 

    } 

    ngOnInit() { 
     this.draw() 
    } 

    ngAfterViewInit() { 

     let canvas = this.noteCanvas.nativeElement 

     let ctx = canvas.getContext('2d') 

     for (var i = -2; i < 3; i++) { 
      var y = (500/2) + (i * 75) 
      ctx.beginPath() 
      ctx.fillStyle = "#000" 
      ctx.moveTo(0, y) 
      ctx.lineTo(500, y) 
      ctx.stroke() 
      console.dir(ctx) 
     } 


    } 


    draw() { 
     setTimeout(() => { 
      let p = this.noteCanvas.nativeElement.parentNode.parentNode 
      this.x = p.clientWidth 
      console.log(p.style['margin-top']) 
      this.y = p.clientHeight 
     }, 0) 
    } 


} 

TL;博士：包裝取決於DOM對象在時間的setTimeout要加載的代碼0

不過，如果有人知道更多的Angular-ish方式，請隨時放入。