我只想通过单击子组件中的按钮来更新父组件中的 bool 值。我有一个基于动态 ngClass 隐藏和显示的滑出式子组件。该类是根据来自父级的 bool 值设置的。但是,当我从子项中的按钮关闭该组件时,我想更新父项中的 bool 值:
父组件 typescript :
export class AppComponent implements OnInit {
showFlyout: boolean
constructor() {}
ngOnInit() {
this.showFlyout = false;
}
}
和父 html:
<main>
<button (click)="showFlyout = !showFlyout"><i class="fa fa-check"></i>Show Flyout</button>
{{showFlyout}}
<app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>
</main>
子组件 typescript :
export class ActivateFlyoutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
closeActivationFlyout() {
const flyout = document.getElementById('flyout');
flyout.classList.remove('active');
}
}
和子组件 html:
<button (click)="closeFlyout()">Close</button>
这是一个 Stackblitz .您可以看到单击父按钮会正确切换类,但我如何通过单击子组件来更新该 bool 值,从而使子组件中不需要 closeActivationFlyout() 方法?
最佳答案
像其他人提到的那样使用 @Output()
,但它需要发出一个事件,您还需要检查在父 html 中触发的事件。
这是一个有效的 StackBlitz
在子组件中。
@Output() onCloseClick = new EventEmitter();
closeFlyout() {
this.onCloseClick.emit();
}
并在父组件 html 中。
<app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''" (onCloseClick)="showFlyout = false"></app-child>
您还可以在父组件中创建一个函数,并触发它,例如 (onCloseClick)="doFunction()"
关于javascript - 从 Angular 5 中的子组件更新父 bool 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49659230/