ข้อผิดพลาด 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

ในเชิงมุม 8 ViewChild รับพารามิเตอร์ 2 ตัว

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

เชิงมุม 8

ในเชิงมุม 8 ViewChild มีอีกพารามิเตอร์หนึ่ง

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

คุณสามารถอ่านเพิ่มเติมได้ที่นี่และที่นี่

เชิงมุม 9

ในAngular 9ค่าเริ่มต้นคือstatic: falseไม่จำเป็นต้องให้พารามิเตอร์ยกเว้นว่าคุณต้องการใช้{static: true}

ใน Angular 8 ViewChildรับพารามิเตอร์ 2 ตัว:

ลองแบบนี้

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

คำอธิบาย:

{static: false}

หากคุณตั้งค่าสแตติกปลอมส่วนประกอบจะถูกเตรียมใช้งานหลังจากการดูการกำหนดค่าเริ่มต้นในเวลาสำหรับngAfterViewInit/ngAfterContentInitฟังก์ชันการเรียกกลับ

{static: true}

หากคุณตั้งค่าสแตติกจริงการเริ่มต้นจะเกิดขึ้นที่มุมมองการเริ่มต้นที่ngOnInit

{ static: false }โดยค่าเริ่มต้นคุณสามารถใช้ หากคุณกำลังสร้างมุมมองแบบไดนามิกและต้องการใช้ตัวแปรการอ้างอิงเทมเพลตคุณควรใช้{ static: true}

สำหรับข้อมูลเพิ่มเติมคุณสามารถอ่านบทความนี้

การสาธิตการทำงาน

ในการสาธิตเราจะเลื่อนไปที่ div โดยใช้ตัวแปรการอ้างอิงเทมเพลต

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

ด้วย{ static: true }, เราสามารถใช้this.scrollTo.nativeElementในngOnInit, แต่ด้วย{ static: false }, this.scrollToจะอยู่undefinedในngOnInit, ดังนั้นเราจึงสามารถเข้าถึงได้เฉพาะในngAfterViewInit

เป็นเพราะเด็กดูต้องการอาร์กิวเมนต์สองตัวลองแบบนี้

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

@ViewChild ('amountInput', {static: false,}) amountInputRef: ElementRef;

ใน Angular 8, ViewChild ใช้ 2 param เสมอและ params ที่สองมีค่า คงที่: จริงหรือคงที่: false

คุณสามารถลองสิ่งนี้:

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

นอกจากนี้สิ่งstatic: falseนี้จะเป็นพฤติกรรมทางเลือกเริ่มต้นใน Angular 9

อะไรคือ static false / true: ดังนั้นตามกฎของหัวแม่มือคุณสามารถทำสิ่งต่อไปนี้:

• { static: true } จำเป็นต้องตั้งค่าเมื่อคุณต้องการเข้าถึง ViewChild ใน ngOnInit

  { static: false }สามารถเข้าถึงได้ใน ngAfterViewInit เท่านั้น นี่คือสิ่งที่คุณต้องการใช้เมื่อคุณมีคำสั่งโครงสร้าง (เช่น * ngIf) ในองค์ประกอบของคุณในเทมเพลตของคุณ

Regex สำหรับการแทนที่ทั้งหมดผ่าน IDEA (ทดสอบด้วย Webstorm)

หา: \@ViewChild\('(.*)'\)

แทนที่: \@ViewChild\('$1', \{static: true\}\)

คุณควรใช้อาร์กิวเมนต์ที่สองกับ ViewChild ดังนี้:

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

ใช้สิ่งนี้

ส่วนประกอบ @ViewChild (ChildDirective, {static: false})

ในเชิงมุม 8 ViewChild มีอีกพารามิเตอร์หนึ่ง

@ViewChild (คอมโพเนนต์ 'nameInput', {static: false})

ฉันแก้ไขปัญหาตามด้านล่าง

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

นอกจากนี้ยังแก้ไขปัญหาของฉัน

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