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

Posted 2023-02-22

【中文标题】Angular @ViewChild() 错误：预期 2 个参数，但得到 1 个

【英文标题】：Angular @ViewChild() error: Expected 2 arguments, but got 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;

【参考方案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 看到这个***.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;