如何隐藏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隐藏，并显示先前发布的元素，但最终出现问题。

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

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"的两种数据绑定，您只需在模板中更新该值。

有关父母互动的更多信息