当我们单击在子模板中定义的按钮时，如何隐藏 PrimeNG 侧边栏（在父模板中定义）？答案

【问题标题】：How to hide PrimeNG sidebar (defined at parent template), when we click on button defined at child template?当我们单击在子模板中定义的按钮时，如何隐藏 PrimeNG 侧边栏（在父模板中定义）？
【发布时间】：2018-03-27 04:23:37
【问题描述】：

我正在使用 PrimeNG 侧边栏，当我们单击按钮时，它会向右滑动并路由到子组件，在子组件中我有带有取消按钮的表单模板。您可以在下面找到侧边栏模板。

sidebar.component.html

<p-sidebar  [(visible)]="visibleSidebar2" position="right [baseZIndex]="10000">
<router-outlet name="createSidebar"></router-outlet>
</p-sidebar>

<a [routerLink]="[{ outlets: { createSidebar: 'create' } }]" class=" navigation__link" (click)="visibleSidebar2 = true"></a>

child.component.html

 <a   pButton  class="btn btn-default"  (click)="Cancel()">Cancel</a>

现在，如果我单击取消按钮，则需要隐藏侧边栏。我尝试使用之前发布的一些 stackoverflow 答案Angular 2 hide and show element ，但最终遇到了问题。

任何回复都会有所帮助。提前致谢。

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

一种可能的选择是从子组件生成自定义事件并在父组件上监听事件。

Child.Component.ts

import {EventEmitter, Output } from '@angular/core';

ChildComponentClass{
@Output() closeClicked = new EventEmitter<boolean>(); // create a new close clicked event

Cancel(){
this.closeClicked.emit(false) // emit the event with boolean value false when Cancel is clicked
}

Parent.Component.html

<Child-Component (closeClicked)="visibleSidebar2=$event"></Child-Component>

在父组件上侦听子组件closeClicked 事件，您可以调用函数并更新函数内部的visibleSlidebar2 值，或者由于您使用[(visible)]="visibleSidebar2" 的两种数据绑定方式，您可以只更新模板中的值如图所示。

For more info Regarding Parent Child Interaction

【讨论】：

@Ramsk 你可以创建一个 plunker 吗？