Erreur Angular @ViewChild() : On attendait 2 arguments, mais on en a obtenu 1

Question

Lorsque j'essaie ViewChild, j'obtiens l'erreur suivante. L'erreur est "Un argument pour 'opts' n'a pas é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) : error TS2554 : Expected 2 arguments, but got 1.

Answer 1

Dans Angular 8 , ViewChild prend 2 paramètres

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

Answer 2

Angulaire 8

Dans Angular 8, ViewChild a un autre paramètre

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

Vous pouvez en savoir plus à ce sujet aquí y aquí

Angular 9 et Angular 10

Sur Angular 9 La valeur par défaut est static: false Il n'est donc pas nécessaire de fournir un paramètre, à moins que vous ne souhaitiez utiliser l'option {static: true}

Answer 3

Dans Angular 8 , ViewChild prend 2 paramètres :

Essayez comme ça :

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

Explication :

{ static : false }

Si vous définissez faux statique le composant enfant est TOUJOURS initialisé après l'initialisation de la vue, à temps pour que l'utilisateur puisse utiliser le composant enfant. ngAfterViewInit/ngAfterContentInit fonctions de rappel.

{ statique : vrai}

Si vous définissez statiquement vrai l'initialisation du composant enfant aura lieu lors de l'initialisation de la vue à l'endroit suivant ngOnInit

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

Pour plus d'informations, vous pouvez lire ceci article

Démonstration de travail

Dans la démo, nous allons faire défiler un div en utilisant la variable de référence du modèle.

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

Avec { static: true } on peut utiliser this.scrollTo.nativeElement en ngOnInit mais avec { static: false } , this.scrollTo sera undefined en ngOnInit Nous pouvons donc y accéder uniquement dans ngAfterViewInit

Answer 4

C'est parce que la vue enfant nécessite un essai à deux arguments comme ceci

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

@ViewChild('amountInput', { static : false, }) amountInputRef : ElementRef ;

Answer 5

Dans Angular 8, ViewChild prend toujours 2 paramètres, et le second paramètre a toujours la valeur suivante statique : vrai o statique : faux

Vous pouvez essayer comme ça :

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

En outre, le static: false sera le comportement de repli par défaut dans Angular 9.

Quels sont les faux/vrais statiques : En règle générale, vous pouvez choisir les options suivantes :

• { static: true } doit être défini lorsque vous souhaitez accéder à l'interface de l'UE. ViewChild dans ngOnInit.

  { static: false } n'est accessible que dans ngAfterViewInit. C'est également ce que vous voulez faire lorsque vous avez une directive structurelle (c'est-à-dire *ngIf) sur votre élément dans votre modèle.