Угловая ошибка @ViewChild (): ожидается 2 аргумента, но получено 1

При попытке ViewChild я получаю сообщение об ошибке. Ошибка: «Не указан аргумент для« opts ».»

Оба @ViewChild выдает ошибку.

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): ошибка TS2554: ожидается 2 аргумента, но получено 1.

В Angular 8 ViewChild принимает 2 параметра

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

Угловой 8

В Angular 8 у ViewChild есть еще один параметр

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

Вы можете прочитать больше об этом здесь и здесь

Угловой 9

По Angular 9умолчанию значение равно static: false, поэтому не нужно указывать параметр, если вы не хотите использовать{static: true}

В Angular 8 ViewChildпринимает 2 параметра:

Попробуйте вот так:

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

Объяснение:

{static: false}

Если вы установите статическое значение false , компонент ALWAYS будет инициализирован после инициализации представления во времени для ngAfterViewInit/ngAfterContentInitфункций обратного вызова.

{static: true}

Если вы установите static true , инициализация будет происходить при инициализации представления вngOnInit

По умолчанию вы можете использовать { static: false }. Если вы создаете динамическое представление и хотите использовать переменную ссылки на шаблон, вам следует использовать{ static: true}

Для получения дополнительной информации, вы можете прочитать эту статью

Рабочая Демо

В демоверсии мы перейдем к элементу div, используя переменную ссылки на шаблон.

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

С { static: true }, мы можем использовать this.scrollTo.nativeElementв ngOnInit, но с { static: false }, this.scrollToбудет undefinedв ngOnInit, поэтому мы можем получить доступ только вngAfterViewInit

это потому, что вид ребенка требует два аргумента, попробуйте так

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

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

В Angular 8 ViewChild всегда принимает 2 параметра, а второй параметр всегда имеет static: true или static: false

Вы можете попробовать так:

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

Кроме того, static: falseв Angular 9 будет использоваться стандартное аварийное поведение.

Что такое статическое ложное / истинное: так что, как правило, вы можете пойти на следующее:

• { static: true } должен быть установлен, когда вы хотите получить доступ к ViewChild в ngOnInit.

  { static: false }можно получить доступ только в ngAfterViewInit. Это также то, к чему вы хотите стремиться, когда у вас есть структурная директива (т.е. * ngIf) для вашего элемента в шаблоне.

Regex для замены всего через IDEA (протестировано с Webstorm)

Найти: \@ViewChild\('(.*)'\)

Заменить: \@ViewChild\('$1', \{static: true\}\)

Вы должны использовать второй аргумент с ViewChild следующим образом:

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

Использовать это

Компонент @ViewChild (ChildDirective, {static: false})

В Angular 8 у ViewChild есть еще один параметр

Компонент @ViewChild ('nameInput', {static: false})

Я решил свою проблему, как показано ниже

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

Это также решило мою проблему.

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