Angular2 - 更新组件时通知指令的最佳做法是什么？

Question

我有一个使用组件作为模板的工具提示指令。动态创建组件时，工具提示 DOM 元素的 innerHtml 尚未准备就绪。例如，只有在 ngAfterViewInit 事件之后，组件才会获得其实际宽度。

但是指令不知道组件模板何时完成渲染。我可以观察组件的私有参数（来自指令）并知道它什么时候是 changed/updated?

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

您可以在指令中添加 @Output() 以通知主机组件

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>

Angular2 - 更新组件时通知指令的最佳做法是什么？

Angular2 - What is the best practice to notify a directive when a component is updated?

typescript

angular2-directives

angular2-template

angular2-components

angular