Angular父子组件用EventEmitter传布尔值子组件接收始终为false如何解决

问题核心原因 #

你混淆了Angular输入输出属性的用法：

• @Output() + EventEmitter 用于子组件向父组件传递事件和数据，不是父传子的传值载体
• 父组件直接把EventEmitter对象绑定给子组件@Input，而非实际的布尔值，同时子组件模板错误调用prototype属性，导致判断逻辑完全失效

具体修改步骤 #

1. 修改父组件TS代码 #

新增普通布尔类型变量存储选中状态，更新选中逻辑时同步修改该变量值：

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {Offer} from "../../../models/offer";

@Component({
  selector: 'app-overview2',
  templateUrl: './overview2.component.html',
  styleUrls: ['./overview2.component.css']
})
export class Overview2Component implements OnInit {
  public offers: Offer[] = [];
  // 新增布尔变量存储选中状态
  public isOfferSelected: boolean = false;

  constructor() { }

  ngOnInit(): void {
    for (let i = 0; i < 8; i++) {
      this.addRandomOffer();
    }
  }

  public addRandomOffer(): void {
    let offer = Offer.createRandomOffer();
    this.offers.push(offer);
  }

  public highlightClickedRow(offer :Offer) {
    for (let i = 0; i < this.offers.length; i++) {
      if (this.offers[i] != offer) {
        this.offers[i].rowClicked = false;
      }
      else {
        this.offers[i].rowClicked = true;
        // 同步更新布尔变量值
        this.isOfferSelected = true;
        this.selected.emit(true);
      }
    }
  }

  @Output('update')
  selected: EventEmitter<boolean> = new EventEmitter<boolean>();
}

2. 修改父组件HTML代码 #

将绑定给子组件的属性改为新增的布尔变量，而非EventEmitter对象：

<div>
  <app-detail2 [offerSelected]="isOfferSelected"></app-detail2>
</div>

3. 修改子组件TS代码 #

将@Input属性的类型改为原生布尔类型，不需要用EventEmitter：

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

@Component({
  selector: 'app-detail2',
  templateUrl: './detail2.component.html',
  styleUrls: ['./detail2.component.css']
})
export class Detail2Component implements OnInit {
  // 改为布尔类型，初始值为false
  @Input() offerSelected: boolean = false;

  constructor() {
  }

  ngOnInit(): void {
  }
}

4. 修改子组件HTML代码 #

直接判断offerSelected的值即可，删除错误的prototype调用：

<div *ngIf="offerSelected then thenBlock else elseBlock"></div>
<br>
<ng-template #thenBlock><label  id="lblSomethingSelected">Something has been selected</label></ng-template>
<ng-template #elseBlock><label  id="lblNothingSelected">Nothing has been selected yet</label></ng-template>

内容的提问来源于stack exchange，提问作者A. Vreeswijk