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

Question

我正在使用 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 之前发布的内容，但最终出现了问题。

任何回复都会有帮助。预先感谢。

Answer 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"

的两种方式数据绑定，您只需更新中的值模板如图所示。

了解更多有关亲子互动的信息

Answer 2

.layout-container .layout-sidebar{
  display: none !important;
  width: 0px !important;
}
.layout-content-wrapper{
  margin-left: 0px !important;
}

用这个