ViewChild est indéfini dans le templateUrl, mais pas le modèle

Question

J'essaie de faire l'injection dynamique d'un composant dans l'angle 4. Je suis capable de faire cela avec succès, mais le problème que je rencontre est quand j'essaie d'attacher dans une cible

<div> 
    <ng-template #detailedGrid></ng-template>  
</div> 

Lors du rendu dans mon code, je continue d'obtenir une erreur que ma cible n'est pas définie.

Voici le code réduite:

@Component({  
    templateUrl: '../../common/components/grid/templates/grid.html' 
    //template: `<div #detailedGrid></div>` 
}) 
export class ListComponent implements OnInit, AfterViewInit { 
    @ViewChild('detailedGrid', {read: ViewContainerRef}) target: ViewContainerRef; 

constructor(private componentFactoryResolver: ComponentFactoryResolver, 
      private viewContainerRef: ViewContainerRef) {} 

ngAfterViewInit() { 

const factory = this.componentFactoryResolver.resolveComponentFactory(DetailedListComponent); 
     const ref = this.viewContainerRef.createComponent(factory); // <-- this one works 
     // const ref = this.target.createComponent(factory); // <-- This one does not work 
     ref.changeDetectorRef.detectChanges(); 
} 

Celui qui fonctionne ajoute essentiellement au bas de la page. Ce que je voulais faire est d'injecter dans l'emplacement div

Erreur:

Cannot read property 'createComponent' of undefined

La « cible » n'est jamais définie.

Donc quelque chose d'intéressant était quand j'ai mis le code à l'intérieur du modèle, le code cible fonctionne, mais quand il est dans le code html templateUrl, ce n'est pas le cas.

Mise à jour: Je compris le problème tout simplement pas la solution

Le problème est que mon tag en html est dans l'étiquette d'un autre composant

code

est à l'intérieur du html dans ce composant

<grid></grid> 

Lorsque j'ai sorti l'étiquette div sur l'extérieur du composant de la grille, cela a fonctionné. Donc, ma question est de savoir comment y accéder dans le cadre de la grille.

Answer 1

Ok, donc la solution est de déplacer le

@ViewChild('detailedGrid', {read: ViewContainerRef}) 
public detailedGrid: ViewContainerRef; 

vers le haut dans le GridComponent

la référence ensuite le composant de grille comme

@ViewChild(GridPageComponent) gridPageComponent: GridPageComponent; 

Maintenant, je peux accéder à la cible

const factory = this.componentFactoryResolver.resolveComponentFactory(PatientsDetailedListComponent);    
const ref = this.gridPageComponent.detailedGrid.createComponent(factory); 
ref.changeDetectorRef.detectChanges();