Angular2 - コンポーネントが更新されたときにディレクティブに通知するためのベストプラクティスは何ですか？

Question

私はtooltipディレクティブを持っています。tharはコンポーネントをテンプレートとして使用しています。コンポーネントを動的に作成する際、ツールチップのDOM要素はまだinnerHtmlで準備ができていません。コンポーネントは、たとえばngAfterViewInitイベントの後にのみ実際の幅を取得します。

しかし、この指示文では、コンポーネントテンプレートのレンダリングが完了した時点がわかりません。コンポーネントのプライベートな議論（ディレクティブから）を見て、いつ変更/更新されるのかを知ることができますか？

tootlipComponentTemplate

@Component({ 
    selector: 'tooltip-container', 
    template: `<div #tooltipContent [innerHTML]="htmlStr"></div>` 
}) 
export class TooltipContainer implements AfterViewInit { 

    @ViewChild('tooltipContent') elementRef: ElementRef; 

    width: number; 
    htmlStr: string; 

    constructor() {} 

    ngAfterViewInit() { // this is the place when I really getting the tooltip width 
    console.log("ngAfterViewInit: " + this.elementRef.nativeElement.offsetWidth); 
    this.width = this.elementRef.nativeElement.offsetWidth; 
    } 

} 

tooltipDirective

@Directive({ 
    selector: '[myTooltip]' 
}) 
export class myTooltipDirective { 

    private tooltip: ComponentRef<TooltipContainer>; 
    private innerHtml: string; 

    @HostListener("mouseenter", ['$event']) 
    show(event:MouseEvent): void { 

    // .. creating the tooltip with factory .. 

    console.log(this.tooltip.instance.width); // its undefined at this point !!! // 

    } 


    constructor() {}  

} 

HTML

<div [myTooltip]="myTextOrHtml">text with tooltip on mouseOver</div> 

Answer 1

あなたが追加することができますホストコンポーネント

export class TooltipContainer implements AfterViewInit { 

    @Output() 
    domReady:EventEmitter = new EventEmitter(); 
    @ViewChild('tooltipContent') elementRef: ElementRef; 

    ngAfterViewInit() { // this is the place when I really getting the tooltip width 
    console.log("ngAfterViewInit: " + this.elementRef.nativeElement.offsetWidth); 
    this.width = this.elementRef.nativeElement.offsetWidth; 
    this.domReady.next(null); 
    } 

<div [myTooltip]="myTextOrHtml" (domReady)="notifyParent()">text with tooltip on mouseOver</div>