Erro angular @ViewChild (): Esperado 2 argumentos, mas obteve 1

Ao tentar o ViewChild, estou recebendo o erro. O erro é "Não foi fornecido um argumento para 'opts'".

O @ViewChild está dando o erro.

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): erro TS2554: Esperava 2 argumentos, mas obteve 1.

No Angular 8, o ViewChild usa 2 parâmetros

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

Angular 8

No Angular 8, o ViewChild possui outro parâmetro

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

Você pode ler mais sobre isso aqui e aqui

Angular 9

No Angular 9valor padrão static: false, é , portanto, não é necessário fornecer parâmetros, a menos que você queira usar{static: true}

No Angular 8, são ViewChildnecessários 2 parâmetros:

Tente assim:

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

Explicação:

{static: false}

Se você definir estático false , o componente SEMPRE será inicializado após a inicialização da exibição no tempo das ngAfterViewInit/ngAfterContentInitfunções de retorno de chamada.

{static: true}

Se você definir static true , a inicialização ocorrerá na visualização de inicialização emngOnInit

Por padrão, você pode usar { static: false }. Se você estiver criando uma visualização dinâmica e desejar usar a variável de referência do modelo, deverá usar{ static: true}

Para mais informações, você pode ler este artigo

Demonstração de trabalho

Na demonstração, rolaremos para uma div usando a variável de referência do modelo.

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

Com { static: true }, podemos usar this.scrollTo.nativeElementin ngOnInit, mas with { static: false }, this.scrollToestará undefinedin ngOnInit, para que possamos acessar somente emngAfterViewInit

é porque view child requer dois argumentos e tente assim

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

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

No Angular 8, o ViewChild sempre usa 2 parâmetros e o segundo parâmetro sempre tem static: true ou static: false

Você pode tentar assim:

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

Além disso, esse static: falseserá o comportamento de fallback padrão no Angular 9.

O que é estático false / true: Portanto, como regra geral, você pode fazer o seguinte:

• { static: true } precisa ser definido quando você deseja acessar o ViewChild no ngOnInit.

  { static: false }só pode ser acessado em ngAfterViewInit. Também é isso que você deseja quando tiver uma diretiva estrutural (por exemplo, * ngIf) no seu elemento no seu modelo.

Regex para substituir tudo via IDEA (testado com Webstorm)

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

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

você deve usar o segundo argumento com o ViewChild assim:

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

Usa isto

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

No Angular 8, o ViewChild possui outro parâmetro

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

Resolvi meu problema como abaixo

@ViewChild (MatSort, {estático: false}) sort: MatSort;

Isso também resolveu meu problema.

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