Angular @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ので、使用したい場合を除きPARAMを提供する必要はありません。{static: true}

Angular 8では、ViewChild2つのパラメーターを取ります：

このようにしてみてください：

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

説明：

{static：false}

static falseを設定すると、コンポーネントは常に、ngAfterViewInit/ngAfterContentInitコールバック関数の時間内にビューの初期化後に初期化されます。

{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

それはビューの子が2つの引数を必要とするためです

@ViewChild（ 'nameInput'、{static：false、}）nameInputRef：ElementRef;

@ViewChild（ 'amountInput'、{static：false、}）amountInputRef：ElementRef;

Angular 8では、ViewChildは常に2つのパラメーターを取り、2番目のパラメーターは常にstatic：trueまたはstatic：falseを持ってい ます

あなたはこのように試すことができます：

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

また、これstatic: falseはAngular 9のデフォルトのフォールバック動作になります。

静的なfalse / trueとは何ですか？したがって、経験則として、次のことを行うことができます。

• { static: true } ngOnInitでViewChildにアクセスするときに設定する必要があります。

  { static: false }ngAfterViewInitでのみアクセスできます。これは、テンプレートの要素に構造的ディレクティブ（* ngIf）がある場合にも適用したいものです。

IDEAを介してすべてを置き換えるための正規表現（Webstormでテスト済み）

検索： \@ViewChild\('(.*)'\)

交換： \@ViewChild\('$1', \{static: true\}\)

次のように、ViewChildで2番目の引数を使用する必要があります。

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

これを使って

@ViewChild（ChildDirective、{static：false}）コンポーネント

Angular 8では、ViewChildに別のパラメーターがあります

@ViewChild（ 'nameInput'、{static：false}）コンポーネント

以下のように問題を解決しました

@ViewChild（MatSort、{static：false}）並べ替え：MatSort;

それも私の問題を解決しました。

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