Kesalahan @ViewChild () sudut: Diharapkan 2 argumen, tetapi ada 1

Saat mencoba ViewChild saya mendapatkan kesalahan. Kesalahan adalah "Argumen untuk 'opts' tidak disediakan."

@ViewChild Baik memberikan kesalahan.

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): error TS2554: Diharapkan 2 argumen, tetapi mendapat 1.

Di Angular 8, ViewChild mengambil 2 parameter

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

Sudut 8

Di Angular 8, ViewChild memiliki param lainnya

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

Anda dapat membaca lebih lanjut tentang ini di sini dan di sini

Sudut 9

Dalam Angular 9nilai default static: false, sehingga tidak perlu menyediakan param kecuali jika Anda ingin menggunakan{static: true}

Dalam Angular 8, ViewChild dibutuhkan 2 parameter:

Coba seperti ini:

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

Penjelasan:

{static: false}

Jika Anda menetapkan false false , komponen SELALU akan diinisialisasi setelah inisialisasi tampilan tepat waktu untuk ngAfterViewInit/ngAfterContentInitfungsi-fungsi panggilan balik.

{static: true}

Jika Anda menyetel true true , inisialisasi akan berlangsung pada tampilan inisialisasi dingOnInit

Secara default Anda dapat menggunakan { static: false }. Jika Anda membuat tampilan dinamis dan ingin menggunakan variabel referensi templat, maka Anda harus menggunakannya{ static: true}

Untuk info lebih lanjut, Anda dapat membaca artikel ini

Demo yang Bekerja

Dalam demo, kita akan gulir ke div menggunakan variabel referensi templat.

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

Dengan { static: true }, kita dapat menggunakan this.scrollTo.nativeElementdi ngOnInit, tetapi dengan { static: false }, this.scrollToakan undefineddi ngOnInit, sehingga kita dapat mengakses hanya dingAfterViewInit

itu karena view child memerlukan dua argumen coba seperti ini

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

@ViewChild ('numberInput', {static: false,}) numberInputRef: ElementRef;

Dalam Angular 8, ViewChild selalu mengambil 2 param, dan params kedua selalu memiliki static: true atau static: false

Anda dapat mencoba seperti ini:

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

Juga static: false ini akan menjadi perilaku fallback default di Angular 9.

Apa yang statis salah / benar: Jadi sebagai aturan praktis Anda dapat mengikuti yang berikut:

• { static: true } perlu diatur ketika Anda ingin mengakses ViewChild di ngOnInit.

  { static: false }hanya dapat diakses di ngAfterViewInit. Ini juga yang Anda inginkan ketika Anda memiliki arahan struktural (yaitu * ngIf) pada elemen Anda di templat Anda.

Regex untuk mengganti semua melalui IDEA (diuji dengan Webstorm)

Temukan: \@ViewChild\('(.*)'\)

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

Anda harus menggunakan argumen kedua dengan ViewChild seperti ini:

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

Gunakan ini

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

Di Angular 8, ViewChild memiliki param lainnya

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

Saya menyelesaikan masalah saya seperti di bawah ini

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

Itu juga menyelesaikan masalah saya.

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