Angular2：親要素との関係で固定要素を配置する

Question

固定要素をブラウザではなく親要素に基づいて配置したいと考えています。

マイテンプレート

<div class="main" style="position: relative"> 
     <div style="position: absolute" positioningFromParent="left" [additionalPixels]=20> 
      ... 
     </div> 
</div> 

マイAngular2指令

import { Directive, ElementRef, Input, OnInit } from "angular2/core" 

@Directive({ 
    selector: "[positioningFromParent]" 
}) 
export class PositioningFromParent implements OnInit { 
    private el:HTMLElement 
    @Input() positioningFromParent: string = "" 
    @Input() additionalPixels: number = 0 

    constructor(el: ElementRef) { 
     this.el = el.nativeElement 
    } 
    ngOnInit() { 
    let v = this.el.parentNode.getBoundingClientRect()[this.positioningFromParent] 
    this.el.style[this.positioningFromParent] = (v + this.additionalPixels).toString() + "px" 
    } 
} 

しかし、それは私の主な要素の幅としては動作しません：私は、このようにangular2ディレクティブは（迅速かつ汚い）を設計しています動的に設定されています（指定できません）。 ngOnInitが実行されると、幅が0になります。私はangle2で親の幅を「見守る」ことができますか？

おかげ

Answer 1

ビューではなく、ngOnInit()使用ngAfterViewInit()で準備ができていません。

import { Directive, ElementRef, Input, AfterViewInit } from "angular2/core" 

@Directive({ 
    selector: "[positioningFromParent]" 
}) 
export class PositioningFromParent implements AfterViewInit { 
    private el:HTMLElement 
    @Input() positioningFromParent: string = "" 
    @Input() additionalPixels: number = 0 

    constructor(el: ElementRef) { 
     this.el = el.nativeElement 
    } 
    ngAfterViewInit() { 
    let v = this.el.parentNode.getBoundingClientRect()[this.positioningFromParent] 
    this.el.style[this.positioningFromParent] = (v + this.additionalPixels).toString() + "px" 
    } 
} 

Answer 2

実際のDOM要素が作成された後で、これは（コンポーネントの入力は解決された後ngOnInitのみと呼ばれる）と呼ばれますので、あなたは、代わりにngOnInitのngAfterViewInitライフサイクルフックを使用する必要があります。 ngAfterViewInitを使用すると、その関数内のコードが実行されるまでに親の幅がゼロでないことを意味するはずです。