Question

尝试使用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。

Answer 1

在Angular 8中，ViewChild需要2个参数

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

Answer 2

在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 }，我们可以在this.scrollTo.nativeElement中使用ngOnInit，但是对于{ static: false }，this.scrollTo将是{{1}中的undefined }，因此我们只能在ngOnInit

中访问

Answer 3

在Angular 8中，ViewChild始终采用2个参数，而第二个params始终具有2个参数 static：true 或 static：false

您可以尝试这样：

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

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

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

{ static: true }时，需要设置 ngOnInit中的ViewChild。

{ static: false }仅可在ngAfterViewInit中访问。这是还有当您有结构性指令时想要去的东西（即* ngIf）放在模板中的元素上。

Answer 4

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


function countLives(){
   return $(".life").length;
}

您可以详细了解here和here

Answer 5

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

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

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

Answer 6

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

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

Answer 7

使用此

@ViewChild（ChildDirective，{static：false}）组件

Answer 8

尝试在Angular 8.0中进行此操作：

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

Answer 9

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

@ViewChild（'nameInput'，{static：false，}）nameInputRef：ElementRef;

@ViewChild（'amountInput'，{static：false，}）amountInputRef：   ElementRef;

Answer 10

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

@ViewChild（'nameInput'，{static：false}）组件

我解决了如下问题

@ViewChild（MatSort，{static：false}）排序：MatSort;

Answer 11

那也解决了我的问题。

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

角@ViewChild（）错误：预期有2个参数，但得到1个

11 个答案: