在 Angular 8 中使用 @ViewChild 无法使用多个模板引用

Question

在我的父组件中，我有多个子组件。现在我想从所有子组件访问一个公共功能。我通过使用 ViewChild 装饰器来做到这一点。但是，我从 ViewAfterInit() 中的第一个子组件获取 return 值。但是当我尝试访问第二个子组件时，我变得不确定。

我的父组件 .ts 文件的代码

import { Component, OnInit, Input, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';
import { CensusComponent } from '../your-data/census/census.component';
import { ApplicationComponent } from '../your-data/application/application.component';
import { ExistingPendingCoverageComponent } from '../your-data/existing-pending-coverage/existing-pending-coverage.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements AfterViewInit{
  @Input() step;

  count:string = 'count1';
  constructor() {

  }
  @ViewChild(CensusComponent, {static: false}) census: CensusComponent;
  @ViewChild(ApplicationComponent, {static: false}) application: ApplicationComponent;
  ngAfterViewInit() {
  console.log('ApplicationComponent:'+ this.application)
    if(this.count === 'count1'){
       this.count = this.census.getSection(); 
    }
    if(this.count === 'count2'){
       this.count = this.application.getSection(); 
    }
  }

}

父组件模板文件的代码

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <div [ngSwitch]=count>
        <app-census *ngSwitchCase="'count1'"></app-census>
        <app-application *ngSwitchCase="'count2'"></app-application>
        <app-existing-pending-coverage *ngSwitchCase="'count3'"></app-existing-pending-coverage>
      </div>
    </div>
  </div>
</div>

这是 stackblitz 演示 link https://stackblitz.com/edit/new-project-zag9um?embed=1&file=app/app.component.html 我的问题是为什么我得到 'undefined'

Answer 1

点击按钮后显示下一个组件。您需要使用 EventEmitter。

EventEmitter 是子组件可以与其父组件通信的方式。

Angular Event Emitter Docs

我将在下面解释如何在这种情况下使用 EventEmitter。

我的解决方案在这里可用：Solution on Stackblitz

census.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-census',
  templateUrl: './census.component.html',

})
export class CensusComponent  {
  @Output() next: EventEmitter<string> = new EventEmitter();

  getSection(){
    // after clicking on getSection we need to emit the value
    // that the parent componente will receive
    this.next.emit('count2'); // <- emit count2
  }

}

your-data.component.html

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <div [ngSwitch]=count>
        <!-- here app-census pass the value to the parent component
          through onNext method ($event is the string value emitted 
          before)
        -->
        <app-census
          (next)="onNext($event)" *ngSwitchCase="'count1'"></app-census>
        <app-application *ngSwitchCase="'count2'"></app-application>        
      </div>
    </div>
  </div>
</div>

your-data.component.ts

import { Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html'

})
export class YourDataComponent {


  count: string = 'count1';

  onNext(count: string) {
    // parent component receives the value emitted by
    // census component and it stores the value in
    // this.count
    this.count = count;
    // now this.count is count2 and application component will be shown
  }

}

在 Angular 8 中使用 @ViewChild 无法使用多个模板引用

Multiple template references not working using @ ViewChild in Angular 8

viewchild

angular-components

angular