Açısal @ViewChild () hatası: 2 bağımsız değişken bekleniyordu, ancak 1 var

ViewChild'i denerken hatayı alıyorum. Hata "" opts "için bir argüman sağlanmadı."

Her iki @ViewChild hata veriyor.

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): hata TS2554: 2 bağımsız değişken bekleniyordu, ancak 1 var.

Açısal 8'de ViewChild 2 parametre alır

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

Açısal 8

Açısal 8'de ViewChild'in başka bir parametresi var

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

Burada ve burada daha fazla bilgi edinebilirsiniz

Açısal 9

Gelen Angular 9varsayılan değer olduğunu static: false, bu nedenle kullanım istemedikçe param sağlamak gerekmez{static: true}

Açısal 8'de, ViewChild 2 parametre alır:

Şunu deneyin:

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

Açıklama:

{statik: yanlış}

Statik false değerini ayarlarsanız , ngAfterViewInit/ngAfterContentInitgeri arama işlevleri için görünümün zamanında başlatılmasından sonra DAİMA bileşeni başlatılır .

{statik: doğru}

Statik true değerini ayarlarsanız , başlatma işlemi,ngOnInit

Varsayılan olarak kullanabilirsiniz { static: false }. Dinamik bir görünüm oluşturuyorsanız ve şablon referans değişkenini kullanmak istiyorsanız,{ static: true}

Daha fazla bilgi için bu makaleyi okuyabilirsiniz

Çalışma Demosu

Demoda, şablon referans değişkenini kullanarak bir div öğesine gideceğiz.

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

İle { static: true }kullanabileceğimiz this.scrollTo.nativeElementiçinde ngOnInit, fakat { static: false }, this.scrollToolacak undefinedyılında ngOnInitbiz sadece in erişebilmesi için,ngAfterViewInit

çünkü görünüm çocuk iki argüman gerektirir böyle deneyin

@ViewChild ('nameInput', {statik: yanlış,}) nameInputRef: ElementRef;

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

Açısal 8'de, ViewChild her zaman 2 parametre alır ve ikinci parametrelerin her zaman statik değeri vardır: true veya static: false

Bu şekilde deneyebilirsiniz:

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

Ayrıca, static: falseAçısal 9'daki varsayılan geri dönüş davranışı olacaktır.

Statik yanlış / doğru nedir: Yani bir kural olarak aşağıdakiler için gidebilirsiniz:

• { static: true } ngOnInit içinde ViewChild'e erişmek istediğinizde ayarlanması gerekir.

  { static: false }sadece ngAfterViewInit içinde erişilebilir. Şablonunuzdaki öğeniz üzerinde yapısal bir yönerge (yani * ngIf) olduğunda da bunu yapmak istersiniz.

Tümünü IDEA ile değiştirmek için normal ifade (Webstorm ile test edilmiştir)

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

Değiştir: \@ViewChild\('$1', \{static: true\}\)

ViewChild ile ikinci argümanı şu şekilde kullanmalısınız:

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

Bunu kullan

@ViewChild (ChildDirective, {statik: yanlış}) Bileşeni

Açısal 8'de ViewChild'in başka bir parametresi var

@ViewChild ('nameInput', {static: false}) bileşeni

Sorunumu aşağıdaki gibi çözdüm

@ViewChild (MatSort, {statik: yanlış}) sırala: MatSort;

Bu da benim sorunumu çözdü.

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