Erreur @ViewChild () angulaire: 2 arguments attendus, mais 1 obtenu

Lorsque j'essaie ViewChild, j'obtiens l'erreur. L'erreur est "Un argument pour 'opts' n'a pas été fourni."

@ViewChild donne à la fois 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 obtenu.

Dans Angular 8, ViewChild prend 2 paramètres

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

Angulaire 8

Dans Angular 8, ViewChild a un autre paramètre

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

Vous pouvez en savoir plus ici et ici

Angulaire 9

La Angular 9valeur par défaut est static: falsedonc n'a pas besoin de fournir de paramètres sauf si vous souhaitez utiliser{static: true}

Dans Angular 8, ViewChild prend 2 paramètres:

Essayez comme ceci:

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

Explication:

{statique: faux}

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

{statique: vrai}

Si vous définissez static true , l'initialisation 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 souhaitez utiliser la variable de référence du modèle, vous devez utiliser{ static: true}

Pour plus d'informations, vous pouvez lire cet article

Démo de travail

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

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

Avec { static: true }, nous pouvons utiliser this.scrollTo.nativeElementdans ngOnInit, mais avec { static: false }, this.scrollTosera undefineddans ngOnInit, donc nous ne pouvons accéder qu'àngAfterViewInit

c'est parce que la vue enfant nécessite deux arguments, essayez comme ceci

@ViewChild ('nameInput', {statique: faux,}) nameInputRef: ElementRef;

@ViewChild ('amountInput', {statique: faux,}) amountInputRef: ElementRef;

Dans Angular 8, ViewChild prend toujours 2 paramètres et les seconds paramètres ont toujours statique: vrai ou statique: faux

Vous pouvez essayer comme ceci:

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

Également static: false va être le comportement de secours par défaut dans Angular 9.

Ce qui est statique faux / vrai: Donc, en règle générale, vous pouvez opter pour les éléments suivants:

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

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

Regex pour remplacer tout via IDEA (testé avec Webstorm)

Trouver: \@ViewChild\('(.*)'\)

Remplacer: \@ViewChild\('$1', \{static: true\}\)

vous devez utiliser un deuxième argument avec ViewChild comme ceci:

@ViewChild("eleDiv", { static: false }) someElement: ElementRef;

Utilisez ceci

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

Dans Angular 8, ViewChild a un autre paramètre

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

J'ai résolu mon problème comme ci-dessous

@ViewChild (MatSort, {statique: faux}) sort: MatSort;

Cela a également résolu mon problème.

@ViewChild('map', {static: false}) googleMap;