@ViewChild dans *ngIf

Question

Question

Quelle est la façon la plus élégante d'obtenir @ViewChild après l'affichage de l'élément correspondant dans le modèle ?

Voici un exemple. Voir aussi Plunker disponible.

Composant.template.html :

<div id="layout" *ngIf="display">
  <div #contentPlaceholder></div>
</div>

Component.component.ts :

export class AppComponent {

    display = false;
    @ViewChild('contentPlaceholder', { read: ViewContainerRef }) viewContainerRef;

    show() {
        this.display = true;
        console.log(this.viewContainerRef); // undefined
        setTimeout(() => {
            console.log(this.viewContainerRef); // OK
        }, 1);
    }
}

J'ai un composant dont le contenu est masqué par défaut. Lorsque quelqu'un appelle show() il devient visible. Cependant, avant que la détection de changement d'Angular 2 ne soit terminée, je ne peux pas faire référence à viewContainerRef . J'ai l'habitude de regrouper toutes les actions requises dans setTimeout(()=>{},1) comme indiqué ci-dessus. Existe-t-il une méthode plus correcte ?

Je sais qu'il existe une option avec ngAfterViewChecked mais cela entraîne trop d'appels inutiles.

RÉPONSE (Plunker)

Answer 1

Utiliser un setter pour le ViewChild :

 private contentPlaceholder: ElementRef;

 @ViewChild('contentPlaceholder') set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
        this.contentPlaceholder = content;
    }
 }

Le setter est appelé une fois avec une référence d'élément. *ngIf devient true .

Remarque : pour Angular 8, il faut s'assurer que le paramètre { static: false } qui est un paramètre par défaut dans les autres versions d'Angular :

 @ViewChild('contentPlaceholder', { static: false })

Remarque : si ContentPlaceholder est un composant, vous pouvez remplacer ElementRef par la classe de votre composant :

  private contentPlaceholder: MyCustomComponent;

  @ViewChild('contentPlaceholder') set content(content: MyCustomComponent) {
     if(content) { // initially setter gets called with undefined
          this.contentPlaceholder = content;
     }
  }

Answer 2

Une alternative pour surmonter ce problème est d'exécuter le détecteur de changement manuellement.

Vous injectez d'abord le ChangeDetectorRef :

constructor(private changeDetector : ChangeDetectorRef) {}

Puis vous l'appelez après avoir mis à jour la variable qui contrôle le *ngIf

show() {
        this.display = true;
        this.changeDetector.detectChanges();
    }

Answer 3

Les réponses ci-dessus n'ont pas fonctionné pour moi car dans mon projet, le ngIf est sur un élément d'entrée. J'avais besoin d'accéder à l'attribut nativeElement afin de me concentrer sur l'entrée lorsque le ngIf est vrai. Il semble qu'il n'y ait pas d'attribut nativeElement sur ViewContainerRef. Voici ce que j'ai fait (en suivant Documentation @ViewChild ):

<button (click)='showAsset()'>Add Asset</button>
<div *ngIf='showAssetInput'>
    <input #assetInput />
</div>

...

private assetInputElRef:ElementRef;
@ViewChild('assetInput') set assetInput(elRef: ElementRef) {
    this.assetInputElRef = elRef;
}

...

showAsset() {
    this.showAssetInput = true;
    setTimeout(() => { this.assetInputElRef.nativeElement.focus(); });
}

J'ai utilisé setTimeout avant la mise au point parce que le ViewChild prend une seconde pour être assigné. Sinon, ce serait indéfini.

Answer 4

Comme d'autres l'ont mentionné, la solution la plus rapide est d'utiliser [hidden] au lieu de *ngIf. En adoptant cette approche, le composant sera créé mais non visible, vous y aurez donc accès. Ce n'est peut-être pas la méthode la plus efficace.

Answer 5

Cela pourrait fonctionner mais je ne sais pas si c'est adapté à votre cas :

@ViewChildren('contentPlaceholder', {read: ViewContainerRef}) viewContainerRefs: QueryList;

ngAfterViewInit() {
 this.viewContainerRefs.changes.subscribe(item => {
   if(this.viewContainerRefs.toArray().length) {
     // shown
   }
 })
}