Question

假设我的组件名称是flightreview，在那个flightreview组件中我有一些文字：2019年1月26日星期六从BLR飞往DXB的飞行时间总计：9 h 55 m详细信息。根据2019年1月26日星期六从BLR到DXB的飞行文本，总时长：9 h 55 m，我的另一个组件名称是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>

Answer 1

在您的情况下，我建议进行简单的输入属性组件交互[hidden] =“ hidden”。

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

没有父子互动的可能的全局解决方案可能是提供共享服务提供的可观察的hide $。因此，您可以在组件A上单击“ next（true）”，然后在组件B中应用隐藏通知

Answer 2

使用EventEmitter是必经之路。监听文本的点击事件，并根据点击发出打开关闭事件。通过使用发出的事件，您可以隐藏或显示其他组件。

https://angular.io/api/core/EventEmitter

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

2 个答案: