Lỗi Angular @ViewChild (): Dự kiến ​​2 đối số, nhưng có 1

Khi dùng thử ViewChild tôi gặp lỗi. Lỗi là "Đối số cho 'opts' không được cung cấp."

Cả @ViewChild đều đưa ra lỗi.

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): lỗi TS2554: Dự kiến ​​2 đối số, nhưng có 1.

Trong Angular 8, ViewChild có 2 tham số

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

Góc 8

Trong Angular 8, ViewChild có một thông số khác

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

Bạn có thể đọc thêm về nó ở đây và ở đây

Góc 9

Trong Angular 9giá trị mặc định là static: false, vì vậy không cần cung cấp param trừ khi bạn muốn sử dụng{static: true}

Trong Angular 8, ViewChildcó 2 tham số:

Hãy thử như thế này:

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

Giải trình:

{tĩnh: sai}

Nếu bạn đặt tĩnh sai , thành phần LUÔN LUÔN được khởi tạo sau khi khởi tạo chế độ xem đúng lúc cho các ngAfterViewInit/ngAfterContentInithàm gọi lại.

{tĩnh: đúng}

Nếu bạn đặt tĩnh đúng , quá trình khởi tạo sẽ diễn ra ở chế độ xem khởi tạo tạingOnInit

Theo mặc định, bạn có thể sử dụng { static: false }. Nếu bạn đang tạo chế độ xem động và muốn sử dụng biến tham chiếu mẫu, thì bạn nên sử dụng{ static: true}

Để biết thêm thông tin, bạn có thể đọc bài viết này

Trình diễn làm việc

Trong bản demo, chúng tôi sẽ cuộn đến div bằng biến tham chiếu mẫu.

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

Với { static: true }, chúng ta có thể sử dụng this.scrollTo.nativeElementtrong ngOnInit, nhưng với { static: false }, this.scrollTosẽ undefinedtrong ngOnInit, vì vậy chúng tôi có thể truy cập trong chỉ trongngAfterViewInit

Đó là bởi vì con xem đòi hỏi hai đối số thử như thế này

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

@ViewChild ('moneyInput', {static: false,}) lượngInputRef: ElementRef;

Trong Angular 8, ViewChild luôn lấy 2 param và param thứ hai luôn có static: true hoặc static: false

Bạn có thể thử như thế này:

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

Ngoài ra, static: falseđây sẽ là hành vi dự phòng mặc định trong Angular 9.

Tĩnh sai / đúng là gì: Vì vậy, theo nguyên tắc thông thường, bạn có thể thực hiện các bước sau:

• { static: true } cần được đặt khi bạn muốn truy cập ViewChild trong ngOnInit.

  { static: false }chỉ có thể được truy cập trong ngAfterViewInit. Đây cũng là những gì bạn muốn thực hiện khi bạn có một chỉ thị cấu trúc (tức là * ng If) trên phần tử của bạn trong mẫu của bạn.

Regex để thay thế tất cả thông qua IDEA (đã thử nghiệm với Webstorm)

Tìm thấy: \@ViewChild\('(.*)'\)

Thay thế: \@ViewChild\('$1', \{static: true\}\)

bạn nên sử dụng đối số thứ hai với ViewChild như thế này:

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

Dùng cái này

@ViewChild (ChildDirective, {static: false}) Thành phần

Trong Angular 8, ViewChild có một thông số khác

Thành phần @ViewChild ('nameInput', {static: false})

Tôi đã giải quyết vấn đề của mình như dưới đây

@ViewChild (MatSort, {static: false}) sắp xếp: MatSort;

Điều đó cũng giải quyết vấn đề của tôi.

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