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的值，该值绑定到我们在此示例中调用的输入装饰器。在详细信息组件中，我们使用ngOnChanges生命周期钩子监听更改。

如果只是要切换，你也可能只是在app.component中执行*ngIf。

希望这会引导你走上正确的轨道

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

1 个答案: