时间戳

首页 > 解决方案 > 如何隐藏组件，当我单击文本时，该文本属于 Angular 中的另一个组件

angular - 如何隐藏组件，当我单击文本时，该文本属于 Angular 中的另一个组件

问题描述

假设我有一个组件名称是 flightreview，在该 flightreview 组件中我有一些文本：Flight on Saturday, January 26th, 2019 from BLR to DXB Total duration: 9 h 55 m Details。2019年1月26日星期六的航班从BLR到DXB的文字下总时长：9小时55米，我还有一个组件名称是app-alltickets

默认情况下 app-alltickets 组件现在显示，但是当有人单击属于 flightreview 组件的文本时，该组件必须隐藏。如何在 Angular 中完成这项任务。

我正在使用组件的名称，这就是为什么如果您不理解它只会显示一些错误，请仔细阅读代码。

<div class="container">
  <div class="row">
    <div class="col-9">
      <app-flightreview></app-flightreview>
    </div>
    <div class="col-3">
      <app-faredetails></app-faredetails>
    </div>
  </div>
</div>

<div class="row pt-5">
  <div class="col-12">
    <section>
      <div class="card clickable">
        <div class="card-header custom onClick='hide()'">
          Review Your Flight Details
        </div>
      </div>
    </section>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <section>
      <div class="card clickable">
        <div class="card-header flightDetails">
          <span class='iconcustom'><i class="fas fa-arrow-circle-right"></i></span>
          Flight on Saturday, January 26th 2019 from BLR to DXB Total duration: 9 h 55 m
          <app-alltickets></app-alltickets>
        </div>
      </div>
    </section>
  </div>
</div>

标签： angular

解决方案

在您的情况下，我建议使用简单的输入属性组件交互 [hidden]="hidden"。

https://angular.io/guide/component-interaction

没有父子交互的可能的全局解决方案可能是提供由共享服务提供的可观察的 hide$。因此，您可以单击组件 A 中的 next(true) 并在组件 B 中应用隐藏通知

推荐阅读