如何等待NgafterViewInit()在创建指令的组件实例时运行

Question

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

  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

使用全球注射的ChangeDetectorRef不需要，并且可能行不通。您可以依靠ComponentRef的changeDetectorRef方法：

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

Answer 2

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