@ViewChild - Angular 13 上的初始化程序错误答案

【问题标题】：@ViewChild - initializer error on Angular 13@ViewChild - Angular 13 上的初始化程序错误
【发布时间】：2022-01-21 22:24:24
【问题描述】：

我正在 Angular 13 中创建应用程序。我想使用 ParentComponent 调用 ChildComponent 的 show() 方法，使用 @ViewChild，但出现错误。旧的问题和答案在这种情况下不起作用。

家长：

<app-child #child></app-child>

@ViewChild('child') child: ChildComponent;

showChild() {
   this.child.show();
}

孩子：

show(){
  console.log('show');
}

错误：

属性 'child' 没有初始化器，也没有在构造函数中明确分配。

解决方案 1：

家长：

@ViewChild('child') child!: ChildComponent;

错误：

TypeError: Cannot read properties of undefined (reading 'show')

解决方案 2：

家长：

@ViewChild('child') child: ChildComponent = new ChildComponent;

没有错误 工作正常，但我怀疑这是否正确？

【问题讨论】：

标签： angular parent-child initializer viewchild angular13

【解决方案1】：

你可以这样初始化。我会帮助你解决你的错误。

@ViewChild('child') child: ChildComponent = {} as ElementRef;

or 

@ViewChild('child') child: ChildComponent = {} as ChildComponent;

【讨论】：

只需将类型传递给 ViewChild 也可以：stackblitz.com/edit/angular-ivy-el9e3r?file=src/app/…

【解决方案2】：

解决您的疑问-

Parent-
<app-child></app-child>
@ViewChild('child') child: ChildComponent;

ngAfterViewInit() {
    // When accessing with ViewChild(), use this lifecycle hook
    // to call methods or for anything related to that component
    this.child.show();
}

Child-
show(){
  console.log('HELLO WORLD');
}

关于访问子组件的额外信息-

有 3 种方法可以通过角度查询子组件、组件的子项或 Html DOM 元素，并且您可以在ngAfterViewInit生命周期钩子中获取查询的 DOM 或组件的对象的最早可能时刻。

1.)根据组件名称查询

app.component.ts

@ViewChild('cardRef', {read: ElementRef}) card1: ElementRef; //by this you can achieve querying over HTML DOM objects
@ViewChild('container') containerDiv: ElementRef;

ngAfterViewInit() {
   console.log("cardRef = ", this.card1);
   console.log("container = ", this.containerDiv);
}

app.component.html

<div class="product" #container>
   <product-card #cardRef></product-card>
</div>

2.) 根据引用进行查询。当您有多张卡片带有不同的数据集并且您想要操作其中的任何一张时，这很有用。

app.component.ts

@ViewChild('cardRef1') card1: ProductCardComponent;
@ViewChild('cardRef2') card2: ProductCardComponent;

ngAfterViewInit() {
   console.log("cardRef1 = ", this.card1);
   console.log("cardRef2 = ", this.card2);
}

app.component.html

<div class="product">
   <product-card #cardRef1 [course]="course[0]"></product-card>
   <product-card #cardRef2 [course]="course[1]"></product-card>
</div>

3.) 当您对集合列表进行查询时，您可以使用 @ViewChildren() 装饰器。

app.component.ts

@ViewChildren(ProductCardComponent) cards: QueryList<ProductCardComponent>; //QueryList will give a lot methods embedded in it (e.g. first, last, forEach, etc)

ngAfterViewInit() {
   console.log(this.cards.first);  //It will give the object for the first card
}

app.component.html

<div class="product" #container>
   <product-card *ngFor="let product of products"></product-card>
</div>

我希望这能消除您的疑虑。

【讨论】：