Tengo una directiva que crea en el código una instancia de la plantilla de componente que usa y establece su HTML interno, que cambiará la dimensión de la plantilla:
var factory = this.resolver.resolveComponentFactory(MyComponentTemplate); this.templateComponent = this.viewContainerRef.createComponent(factory); this.templateComponent.instance.htmlStr = anyText;Ahora aquí está el problema. En esta etapa, no definiré los tamaños de los componentes:
console.log(this.templateComponent.instance.width); //undefined console.log(this.templateComponent.instance.height); //undefinedEn la depuración, noté que solo después de que mi componente ejecuta ngAfterViewInit() , solo entonces puedo leer el ancho y la altura de la plantilla del componente de mi directiva y usar esos valores.
¿Hay alguna manera de decirle a mi directiva que espere hasta que finalice ngAfterViewInit() y luego haga lo que necesito de mi directiva con la información que estoy buscando?
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); //undefinedEl uso de un ChangeDetectorRef inyectado globalmente no es necesario y es posible que no funcione. Puede confiar en el método changeDetectorRef de ComponentRef :
var factory = this.resolver.resolveComponentFactory(MyComponentTemplate); this.templateComponent = this.viewContainerRef.createComponent(factory); this.templateComponent.instance.htmlStr = anyText; this.templateComponent.changeDetectorRef.detectChanges();