Angular @ViewChild() 错误：预期 2 个参数，但得到 1 个答案

【问题标题】：Angular @ViewChild() error: Expected 2 arguments, but got 1Angular @ViewChild() 错误：预期 2 个参数，但得到 1 个
【发布时间】：2019-11-04 08:20:44
【问题描述】：

尝试 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 个。

【问题讨论】：

第 11 行是什么？
@TonyNgo @ViewChild('nameInput') nameInputRef: ElementRef;

标签： angular typescript viewchild

【解决方案1】：

在 Angular 8 中，ViewChild 有 2 个参数

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

【讨论】：

您能否将其标记为已接受？来自 Angular 文档：静态 - 是否在更改检测运行之前解析查询结果（即仅返回静态结果）。如果未提供此选项，编译器将退回到其默认行为，即使用查询结果来确定查询解析的时间。如果任何查询结果在嵌套视图中（例如 *ngIf），则查询将在更改检测运行后解析。否则，它将在更改检测运行之前解决。
如果你想让他接受你的答案是最好的，你应该把它添加到答案中
注意：要保持您在 Angular 7 中的行为，您需要指定 { static: true }。 ng update 将帮助您在需要时自动执行此操作。或者，如果您已经将依赖项升级到 Angular 8，此命令将帮助您迁移代码：ng update @angular/core --from 7 --to 8 --migrate-only
如果元素需要在 ngOnInit 期间可用，则 static 需要为true，但如果它可以等到 init 之后它可以是false，这意味着它不会在 ngAfterViewInit/ngAfterContentInit 之前可用。
我不知道。谢谢。 :-)

【解决方案2】：

角度 8

在 Angular 8 中，ViewChild 有另一个参数

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

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

角 9 和角 10

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

【讨论】：

在您链接到的一篇文章中，它们显示的语法类似于@ContentChild('foo', {static: false}) foo !: ElementRef;。我对感叹号很好奇。这也是 Angular 8 的新功能吗？
@KonradViltersten 看到这个stackoverflow.com/a/56950936/2279488

【解决方案3】：

在 Angular 8 中，ViewChild 有 2 个参数：

试试这样：

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

说明：

{ 静态：假 }

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

{静态：真}

如果你设置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 in ngOnInit，所以我们只能在ngAfterViewInit中访问

【讨论】：

【解决方案4】：

这是因为视图子需要两个参数尝试这样

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

@ViewChild('amountInput', { static: false, }) amountInputRef: 元素引用；

【讨论】：

【解决方案5】：

在 Angular 8 中，ViewChild 总是有 2 个参数，而第二个参数总是有 静态：真或静态：假

你可以这样试试：

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

另外，static: false 将成为 Angular 9 中的默认后备行为。

什么是静态假/真：因此，根据经验，您可以选择以下内容：

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

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

【讨论】：

【解决方案6】：

在 Angular 8.0 中试试这个：

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

【讨论】：

这个问题已经有一年了，但你有理由，在 Angular 8.0 中是必需的 {static:true/false}。在 Angular 9 和 10 中，这个参数是可选的

【解决方案7】：

通过 IDEA 替换所有的正则表达式（用 Webstorm 测试）

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

替换：\@ViewChild$'$1', \{static: true\}$

【讨论】：

【解决方案8】：

你应该像这样使用 ViewChild 的第二个参数：

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

【讨论】：

【解决方案9】：

使用这个

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

【讨论】：

【解决方案10】：

在 Angular 8 中，ViewChild 有另一个参数

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

我解决了我的问题，如下所示

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

【讨论】：

【解决方案11】：

这也解决了我的问题。

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

【讨论】：