typescript - Angular @ViewChild() erreur : 2 arguments attendus, mais 1 reçu

Lorsque j'essaie ViewChild, je reçois l'erreur. L'erreur est « Aucun argument pour 'opts' n'a été fourni. »

Les deux @ViewChild donnent l'erreur.

import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core';
import { Ingredient } from 'src/app/shared/ingredient.model';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {

@ViewChild('nameInput') nameInputRef: ElementRef;
@ViewChild('amountInput') amountInputRef: ElementRef;
@Output() ingredientAdded = new EventEmitter<Ingredient>();
  constructor() {}

  ngOnInit() {
  }

  onAddItem() {
    const ingName = this.nameInputRef.nativeElement.value;
    const ingAmount = this.amountInputRef.nativeElement.value;
    const newIngredient = new Ingredient(ingName, ingAmount);
    this.ingredientAdded.emit(newIngredient);
  }

}

ts(11,2) : erreur TS2554 : 2 arguments attendus, mais 1 a été fourni.

Réponse #1

Dans Angular 8, ViewChild prend 2 paramètres

 @ViewChild(ChildDirective, {static: false}) Component

Réponse #2

Angular 8

Dans Angular 8, ViewChild a un autre paramètre

@ViewChild('nameInput', {static: false}) component : Component

Vous pouvez en lire davantage ici et ici

Angular 9 & Angular 10

Dans Angular 9, la valeur par défaut est static: false, donc il n'est pas nécessaire de fournir le paramètre à moins que vous ne vouliez utiliser {static: true}

Réponse #3

Dans Angular 8, ViewChild prend 2 paramètres :

Essayez comme ça :

@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;

Explication :

{ statique : faux }

Si vous définissez static false, le composant enfant est TOUJOURS initialisé après l'initialisation de la vue à temps pour les fonctions de rappel ngAfterViewInit/ngAfterContentInit.

{ statique : vrai }

Si vous définissez static true, l'initialisation du composant enfant aura lieu lors de l'initialisation de la vue à ngOnInit

Par défaut, vous pouvez utiliser { static: false }. Si vous créez une vue dynamique et que vous voulez utiliser la variable de référence du modèle, alors vous devriez utiliser { static: true }

Pour plus d'informations, vous pouvez lire cet article

Démo fonctionnelle

Dans la démo, nous allons faire défiler jusqu'à une div en utilisant une variable de référence de modèle.

 @ViewChild("scrollDiv", { static: true }) scrollTo: ElementRef;

Avec { static: true }, nous pouvons utiliser this.scrollTo.nativeElement dans ngOnInit, mais avec { static: false }, this.scrollTo sera undefined dans ngOnInit, donc nous ne pouvons y accéder que dans ngAfterViewInit