親要素を埋めるために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 
    } 


} 

これで、しかし、それは常に大きすぎるので、オレンジ色のマージンを考慮しません。以下に示す、あなたは縦型オーバーフローがあることを見ることができます。

誰もが任意の知恵を提供することはできますか？私は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; DR：DOMは、時間のsetTimeoutメソッドでロードされるオブジェクトに依存したコードをラップ0

それでも、誰かがより角度のある方法を知っているなら、それを自由に落としてください。