我刚开始学习Angular，但我遇到了一个问题，在过去的几个小时里我一直在努力解决这个问题。我在两个组件之间有父子关系。现在，我想将一个boolean变量从我的主变量共享给一个子变量。当为真时，孩子应该显示文本，如果为假，则显示不同的文本。下面是@输出代码：

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[] = [];

  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.selected.emit(true);
      }
    }
  }

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

}

然后在我的HTML的父，我有以下：

<代码><；细分（>；）<；app-detail2[offerSelected]="；选定"；>；<；/app-detail2>；<；/DIV>；

在孩子的TypeScript中，我收集@输出如下：

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

然后，在子HTML中，我想使用布尔值来决定使用以下代码显示标签：

@Component({
  selector: 'app-detail2',
  templateUrl: './detail2.component.html',
  styleUrls: ['./detail2.component.css']
})
export class Detail2Component implements OnInit {

  @Input() offerSelected: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() {
  }

  ngOnInit(): void {
  }

}

但我遇到的问题是<div *ngIf="offerSelected.prototype then thenBlock else elseBlock"></div> <br> {{offerSelected.prototype}} <ng-template #thenBlock><label id="lblSomethingSelected">Something has been selected yet</label></ng-template> <ng-template #elseBlock><label id="lblNothingSelected">Nothing has been selected yet</label></ng-template> 总是offerSelected。现在我认为这是因为<div *ngIf="offerSelected.prototype then thenBlock else elseBlock"></div> <br> {{offerSelected.prototype}} <ng-template #thenBlock><label id="lblSomethingSelected">Something has been selected yet</label></ng-template> <ng-template #elseBlock><label id="lblNothingSelected">Nothing has been selected yet</label></ng-template> 的类型是offerSelected而不是真正的EventEmitter<boolean>。但我怎样才能像我想的那样使用它呢？请让我知道！

顺晟科技：

只是为了在回答中捕捉讨论..

当组件之间存在父子关系并将数据从父级传递到子级时，不需要EventEmitter.您只需在父级上设置一个属性，然后指定一个boolean来接收子级中的值。

@Input

更改后，子级中的HTML可以是：

// parent.component.ts

selected: boolean;

// child.component.ts

@Input()
offerSelected: boolean;

如果您要将数据从子节点发送到父节点，那么您需要一个EventEmitter.