如何使用angular4显示/隐藏组件？

Question

我有2个组件，所以我具有扩展功能，如果用户单击一个组件，则应全屏显示，因此在这种情况下，我想隐藏其他组件，反之亦然。组件在其他组件上正在扩展和重叠。 如何使用angular2 +实现此目的？

search.component.html

    <div class="card card-outline-info" [ngClass]="{'expandWidget':isClassExpanded}" (click)="onClickMe($event)" >
      <span class="pull-right fa fa-compass"  style="font-size:25px"></span>
      <div class="card-header bg-info"><h5>Detail</h5></div>
      <div class="card-block">
            <p>TExt</p>
        </div>
      </div>

search.component.ts

@Output() open: EventEmitter<any> = new EventEmitter();
 onClickMe(event) {
     event.target.classList.add('expandWidget'); // To ADD

    if(event.target.classList.contains('expandWidget')){
        event.target.classList.remove('expandWidget');
    }

      this.isClassExpanded = ! this.isClassExpanded;
      this.open.emit(true);
 console.log('You are my hero!',event);
}

detail.component.html

<div class="card card-outline-info" [hidden]="hideContent>
  <div class="card-header bg-info"><h5>Live Stream/Search Results</h5></div>
  <div class="card-block">
    <p>Text</p>
 </div>
</div>
</div>

detail.component.ts

onClicked= (value:boolean) => {
   alert("Outside of component "+value);
   this.hiddenContent = value;
 }

main.component.html

<div class="row">
  <div class="col-sm-6">
    <app-search></app-search>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <app-detail></app-detail>
  </div>

</div>

Answer 1

鉴于我正确理解了您的问题，这是解决问题的一种方法：

https://stackblitz.com/edit/angular-playground-dguqkn?file=app%2Fdetail.component.ts

发生的情况是您搜索组件向父组件（app.component）发出了一个事件，该事件更改了detailHidden的值，该值绑定到Input装饰器，在此示例中我们将其隐藏。 然后，在detail组件中，我们使用ngOnChanges生命周期挂钩监听更改。

您也可以只在app.component本身中进行*ngIf切换。

希望这会引导您走上正确的道路