从指令创建组件实例时如何等待 ngAfterViewInit() 运行？

Question

我有一个指令在代码中创建他使用的组件模板实例并设置其 innerHTML，这将更改模板维度：

  var factory = this.resolver.resolveComponentFactory(MyComponentTemplate);
  this.templateComponent = this.viewContainerRef.createComponent(factory);

  this.templateComponent.instance.htmlStr = anyText;

现在，问题来了。在此阶段，我将对组件大小进行未定义：

console.log(this.templateComponent.instance.width);    //undefined
console.log(this.templateComponent.instance.height);   //undefined

在调试中，我注意到只有在我的组件运行 ngAfterViewInit() 之后，我才能从我的指令中读取组件模板宽度和高度并使用该值。

有没有办法让我的指令等到 ngAfterViewInit() 结束，而不是用我正在寻找的信息从我的指令中做我需要的事情。

Answer 1

constructor(private cdRef:ChangeDetectorRef) {}

...

  var factory = this.resolver.resolveComponentFactory(MyComponentTemplate);
  this.templateComponent = this.viewContainerRef.createComponent(factory);
  this.templateComponent.instance.htmlStr = anyText;

  this.cdRef.detectChanges(); // run change detection immediately

  console.log(this.templateComponent.instance.width);    //undefined
  console.log(this.templateComponent.instance.height);   //undefined

Answer 2

使用全局注入 ChangeDetectorRef 没有必要，而且可能不起作用。您可以依赖 ComponentRef 的 changeDetectorRef 方法：

var factory = this.resolver.resolveComponentFactory(MyComponentTemplate);
this.templateComponent = this.viewContainerRef.createComponent(factory);
this.templateComponent.instance.htmlStr = anyText;

this.templateComponent.changeDetectorRef.detectChanges();

从指令创建组件实例时如何等待 ngAfterViewInit() 运行？

How to wait that ngAfterViewInit() runs while creating instance of a component from a directive?

angular2-directives

angular2-components

angular