Error angular @ViewChild (): se esperaban 2 argumentos, pero obtuve 1

Al intentar ViewChild obtengo el error. El error es "No se proporcionó un argumento para 'opts'".

Tanto @ViewChild está dando el error.

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: Se esperaban 2 argumentos, pero obtuve 1.

En Angular 8, ViewChild toma 2 parámetros

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

Angular 8

En Angular 8, ViewChild tiene otro parámetro

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

Puedes leer más sobre esto aquí y aquí

Angular 9

El Angular 9valor predeterminado es static: false, por lo que no necesita proporcionar parámetros a menos que desee usar{static: true}

En Angular 8, ViewChildtoma 2 parámetros:

Intenta así:

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

Explicación:

{estática: falso}

Si establece false estático , el componente SIEMPRE se inicializa después de la inicialización de la vista a tiempo para las ngAfterViewInit/ngAfterContentInitfunciones de devolución de llamada.

{static: true}

Si establece true estático , la inicialización tendrá lugar en la inicialización de la vista enngOnInit

Por defecto puedes usar { static: false }. Si está creando una vista dinámica y desea usar la variable de referencia de plantilla, entonces debe usar{ static: true}

Para más información, puedes leer este artículo

Demo de trabajo

En la demostración, nos desplazaremos a un div usando la variable de referencia de plantilla.

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

Con { static: true }, podemos usar this.scrollTo.nativeElementen ngOnInit, pero con { static: false }, this.scrollToestará undefineden ngOnInit, por lo que podemos acceder solo enngAfterViewInit

es porque ver hijo requiere dos argumentos intente así

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

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

En Angular 8, ViewChild siempre toma 2 parámetros, y el segundo parámetro siempre tiene static: true o static: false

Puedes intentarlo así:

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

Además, static: falseserá el comportamiento de reserva predeterminado en Angular 9.

Qué es estático falso / verdadero: por lo tanto, como regla general, puede elegir lo siguiente:

• { static: true } debe configurarse cuando desee acceder a ViewChild en ngOnInit.

  { static: false }solo se puede acceder en ngAfterViewInit. Esto también es lo que desea utilizar cuando tiene una directiva estructural (es decir, * ngIf) en su elemento en su plantilla.

Regex para reemplazar todo a través de IDEA (probado con Webstorm)

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

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

deberías usar el segundo argumento con ViewChild así:

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

Utilizar este

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

En Angular 8, ViewChild tiene otro parámetro

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

Resolví mi problema como a continuación

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

Eso también resolvió mi problema.

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