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。

177672 次浏览
小开

角8

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

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

你可以阅读更多关于它在这里和在这里

Angular 9 &角10

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

小开

这是因为viewchild需要两个参数，像这样尝试

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

@ViewChild('amountInput'， {static: false，}) amountInputRef: ElementRef; < / p >

小开
最佳答案

在Angular 8中，ViewChild接受2个参数

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

这也解决了我的问题。

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

在Angular 8中，ViewChild接受2个参数:

试着这样做:

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

解释:

{static: false}

如果你设置了静态错误，子组件ALWAYS会在视图初始化之后及时为ngAfterViewInit/ngAfterContentInit回调函数初始化。

{static: true}

如果你设置了静态的真实，子组件的初始化将发生在视图的初始化ngOnInit处

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

更多信息，你可以阅读这个文章

Working Demo

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

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

对于{ static: true }，我们可以在ngOnInit中使用this.scrollTo.nativeElement，但是对于{ static: false }， this.scrollTo将是ngOnInit中的undefined，因此我们只能在ngAfterViewInit中访问in

小开

Regex替换所有通过IDEA (Webstorm测试)

发现:\@ViewChild\('(.*)'\)

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

小开
在Angular 8中，ViewChild总是接受2个参数，第二个参数也总是 static: true或静态:假

你可以这样尝试:

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

而且，static: false将是Angular 9中的默认回退行为。

什么是静态错误/正确: 所以根据经验，你可以使用以下方法:

  • { static: true }当你想访问 ViewChild在ngOnInit.

    { static: false }只能在ngAfterViewInit中访问。这是 当你有一个结构指令的时候你想要做什么

    • .(即*ngIf)在模板中的元素上
小开

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

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

使用这个

@ViewChild(ChildDirective， {static: false}

小开

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

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

我解决我的问题如下

@ViewChild(MatSort， {static: false}) sort: MatSort;

小开

在angular 8.0中试试这个:

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

提交答案