Как дождаться запуска ngAfterViewInit() при создании экземпляра компонента из директивы?

У меня есть директива, которая создает в коде экземпляр шаблона компонента, который он использует, и устанавливает его innerHTml, который изменит размер tempalte:

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

  this.templateComponent.instance.htmlStr = anyText;

Вот в чем проблема. На этом этапе я получу undefined по размерам компонентов:

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

При отладке я заметил, что только после того, как мой компонент запустит ngAfterViewInit(), только тогда я смогу прочитать ширину и высоту шаблона компонента из моей директивы и использовать эти значения.

Есть ли способ, которым я могу сказать своей директиве подождать, пока ngAfterViewInit() не закончится, а затем сделать то, что мне нужно, из моей директивы с той информацией, которую я ищу.


angular angular2-directives angular2-components
person AngularOne    schedule 27.04.2017    source источник
comment
Почему это должно быть в ngAfterViewInit? Почему бы вам просто не поставить его после this.createComponent()? Возможно, вам придется сначала ввести ChangeDetectorRef и вызвать cdRef.detectChanges().   -  person Günter Zöchbauer    schedule 27.04.2017
comment
Вы абсолютно правы. После вызова detectChanges это сработало. Большое спасибо, вы сэкономили мне много туров   -  person AngularOne    schedule 27.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

Использование глобально внедренного ChangeDetectorRef не обязательно и может не сработать. Вы можете положиться на метод ComponentRef changeDetectorRef:

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

this.templateComponent.changeDetectorRef.detectChanges();
person robin850    schedule 20.11.2019