Błąd kątowy @ViewChild (): oczekiwano 2 argumentów, ale otrzymał 1

Podczas próby ViewChild pojawia się błąd. Błąd brzmi: „Nie podano argumentu„ opts ”.”

Zarówno @ViewChild podaje błąd.

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): błąd TS2554: Oczekiwano 2 argumentów, ale otrzymał 1.

W Angular 8 ViewChild przyjmuje 2 parametry

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

Kątowy 8

W Angular 8 ViewChild ma inny parametr

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

Możesz przeczytać więcej o tym tutaj i tutaj

Kątowy 9

W Angular 9Domyślną wartością jest static: false, więc nie ma potrzeby, aby zapewnić param chyba że chcesz używać{static: true}

W Angular 8 ViewChildprzyjmuje 2 parametry:

Spróbuj tak:

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

Wyjaśnienie:

{static: false}

Jeśli ustawisz wartość false na statyczną , komponent ZAWSZE zostanie zainicjowany po zainicjowaniu widoku w czasie dla ngAfterViewInit/ngAfterContentInitfunkcji wywołania zwrotnego.

{static: true}

Jeśli ustawisz wartość true true , inicjalizacja nastąpi przy inicjalizacji widoku o godziniengOnInit

Domyślnie możesz użyć { static: false }. Jeśli tworzysz widok dynamiczny i chcesz użyć zmiennej odwołania do szablonu, powinieneś użyć{ static: true}

Aby uzyskać więcej informacji, możesz przeczytać ten artykuł

Demo pracy

W wersji demonstracyjnej przewijamy do div przy użyciu zmiennej odniesienia szablonu.

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

Dzięki { static: true }, możemy użyć this.scrollTo.nativeElementw ngOnInit, ale { static: false }, this.scrollTobędzie undefinedsię ngOnInit, więc mamy dostęp jedynie wngAfterViewInit

Dzieje się tak, ponieważ widok dziecka wymaga dwóch argumentów. Spróbuj tego

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

@ViewChild ('kwotaInput', {static: false,}) kwotaInputRef: ElementRef;

W Angular 8 ViewChild zawsze przyjmuje 2 parametry, a drugie parametry zawsze mają statyczny: prawda lub statyczny: fałsz

Możesz spróbować w ten sposób:

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

Ponadto, static: falsebędzie domyślnym zachowaniem awaryjna w kątowym 9.

Co to jest statyczne fałsz / prawda: Z reguły można zastosować następujące zasady:

• { static: true } należy ustawić, aby uzyskać dostęp do ViewChild w ngOnInit.

  { static: false }można uzyskać dostęp tylko w ngAfterViewInit. To jest również to, do czego chcesz się zastosować, gdy masz dyrektywę strukturalną (tj. * NgIf) na swoim elemencie w szablonie.

Regex w celu zastąpienia wszystkich za pośrednictwem IDEA (testowane za pomocą Webstorm)

Odnaleźć: \@ViewChild\('(.*)'\)

Zastąpić: \@ViewChild\('$1', \{static: true\}\)

powinieneś użyć drugiego argumentu z ViewChild w następujący sposób:

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

Użyj tego

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

W Angular 8 ViewChild ma inny parametr

@ViewChild („nameInput”, {static: false}) składnik

Rozwiązałem problem jak poniżej

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

To także rozwiązało mój problem.

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