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 : Component
角 9 和角 10
在 Angular 9 中默认值为 static: false，因此不需要提供参数，除非您想使用 {static: true}
@ContentChild('foo', {static: false}) foo !: ElementRef;。我对感叹号很好奇。这也是 Angular 8 的新功能吗？
在 Angular 8 中，ViewChild 采用 2 个参数：
试试这样：
@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;
解释：
{静态：假}
如果您设置 static false，则子组件总是在视图初始化后及时为 ngAfterViewInit/ngAfterContentInit 回调函数初始化。
{静态：真}
如果您设置 static true，则子组件初始化将在 ngOnInit 处的视图初始化时进行
默认情况下，您可以使用 { static: false }。如果您正在创建动态视图并希望使用模板引用变量，那么您应该使用 { static: true}
有关详细信息，您可以阅读此article
工作演示
在演示中，我们将使用模板引用变量滚动到一个 div。
@ViewChild("scrollDiv", { static: true }) scrollTo: ElementRef;
使用 { static: true }，我们可以在 ngOnInit 中使用 this.scrollTo.nativeElement，但是使用 { static: false }，this.scrollTo 在 ngOnInit 中将是 undefined，因此我们只能在 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 } 需要在 ngOnInit 中访问 ViewChild 时设置。 { static: false } 只能在 ngAfterViewInit 中访问。当您在模板中的元素上有一个结构指令（即 *ngIf）时，这也是您想要的。
在 Angular 8.0 中试试这个：
@ViewChild('result',{static: false}) resultElement: ElementRef;
通过 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}) 排序：MatSort;
这也解决了我的问题。
@ViewChild('map', {static: false}) googleMap;
{ static: true }。ng update将帮助您在需要时自动执行此操作。或者，如果您已经将依赖项升级到 Angular 8，此命令将帮助您迁移代码：ng update @angular/core --from 7 --to 8 --migrate-onlytrue，但如果它可以等到 init 之后它可以是false，这意味着它直到 ngAfterViewInit/ngAfterContentInit 才可用。