Angular @ViewChild() error: Expected 2 arguments, but got 1

Question

尝试 ViewChild 时出现错误。错误是 "An argument for 'opts' was not provided."

@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): error TS2554: Expected 2 arguments, but got 1.

Answer 1

Angular 8

在Angular8中，ViewChild还有一个param

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

您可以阅读更多相关信息here and here

Angular 9 & Angular 10

在Angular 9中默认值为static: false，所以不需要提供参数除非你想使用{static: true}

Answer 2

这是因为 view child 需要两个参数 try 这样

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

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

Answer 3

在Angular8中，ViewChild有2个参数

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

Answer 4

这也解决了我的问题。

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

Answer 5

在Angular8中，ViewChild有2个参数：

这样试试：

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

解释：

{ static: false }

如果您设置 static false，子组件总是在 ngAfterViewInit/ngAfterContentInit 回调函数的视图初始化之后及时初始化。

{ static: true}

如果设置 static true，子组件初始化将在 ngOnInit

的视图初始化时进行

默认情况下您可以使用 { static: false }。如果您正在创建动态视图并希望使用模板引用变量，那么您应该使用 { static: true}

更多信息，您可以阅读这篇article

Working Demo

在演示中，我们将使用模板引用变量滚动到 div。

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

使用{ static: true }，我们可以在ngOnInit中使用this.scrollTo.nativeElement，但是使用{ static: false }，this.scrollTo将在[=中使用undefined 14=] ，所以我们只能在 ngAfterViewInit

中访问

Answer 6

用于通过 IDEA 全部替换的正则表达式（使用 Webstorm 测试）

查找：\@ViewChild\('(.*)'\)

替换：\@ViewChild\('', \{static: true\}\)

Answer 7

在Angular8中，ViewChild总是带2个param，第二个params总是带 静态：真或静态：假

你可以这样试试：

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

此外，static: false 将成为 Angular 9 中的默认回退行为。

什么是静态的false/true：因此，根据经验，您可以执行以下操作：

{ static: true }需要在访问时设置 ngOnInit 中的 ViewChild。

{ static: false }只能在ngAfterViewInit中访问。这是还有当你有一个结构指令时你想要做什么（即 *ngIf）在模板中的元素上。

Answer 8

您应该像这样对 ViewChild 使用第二个参数：

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

Answer 9

使用这个

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

Answer 10

在Angular8中，ViewChild还有一个param

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

我解决了如下问题

@ViewChild(MatSort, {static: false}) 排序：MatSort;

Answer 11

在 angular 8.0 中试试这个：

@ViewChild('result',{static: false}) resultElement: ElementRef;

Angular @ViewChild() error: Expected 2 arguments, but got 1