Errore angolare @ViewChild (): previsti 2 argomenti, ma ottenuto 1

Quando provo ViewChild ottengo l'errore. L'errore è "Non è stato fornito un argomento per 'opts'."

Entrambi @ViewChild sta dando l'errore.

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): errore TS2554: previsti 2 argomenti, ma ottenuto 1.

In Angular 8, ViewChild accetta 2 parametri

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

Angolare 8

In Angular 8, ViewChild ha un altro parametro

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

Puoi leggere di più qui e qui

Angolare 9

Nel Angular 9valore predefinito è static: false, quindi non è necessario fornire param se non si desidera utilizzare{static: true}

In Angular 8, ViewChildaccetta 2 parametri:

Prova in questo modo:

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

Spiegazione:

{statico: falso}

Se si imposta statico false , il componente SEMPRE viene inizializzato dopo l'inizializzazione della vista in tempo per le ngAfterViewInit/ngAfterContentInitfunzioni di callback.

{statico: vero}

Se si imposta statico true , l'inizializzazione avrà luogo all'inizializzazione della vista inngOnInit

Di default puoi usare { static: false }. Se si sta creando una vista dinamica e si desidera utilizzare la variabile di riferimento del modello, è necessario utilizzare{ static: true}

Per maggiori informazioni, puoi leggere questo articolo

Demo di lavoro

Nella demo, scorreremo fino a un div usando la variabile di riferimento del modello.

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

Con { static: true }, possiamo usare this.scrollTo.nativeElementin ngOnInit, ma con { static: false }, this.scrollTosarà undefinedin ngOnInit, quindi possiamo accedere solo angAfterViewInit

è perché view child richiede due argomenti: prova in questo modo

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

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

In Angular 8, ViewChild accetta sempre 2 parametri e il secondo parametro ha sempre statico: vero o statico: falso

Puoi provare così:

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

Inoltre, static: falsesarà il comportamento di fallback predefinito in Angular 9.

Cosa sono statici false / true: Quindi, come regola generale, puoi scegliere quanto segue:

• { static: true } deve essere impostato quando si desidera accedere a ViewChild in ngOnInit.

  { static: false }è possibile accedere solo in ngAfterViewInit. Questo è anche ciò che vuoi fare quando hai una direttiva strutturale (cioè * ngIf) sul tuo elemento nel tuo modello.

Regex per la sostituzione di tutto tramite IDEA (testato con Webstorm)

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

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

dovresti usare il secondo argomento con ViewChild in questo modo:

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

Usa questo

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

In Angular 8, ViewChild ha un altro parametro

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

Ho risolto il mio problema come di seguito

@ViewChild (MatSort, {static: false}) ordina: MatSort;

Ciò ha anche risolto il mio problema.

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