我只想在单击子组件中的按钮时更新父组件中的布尔值。我有一个基于动态ngClass隐藏和显示的滑出式子组件。该类基于父级的布尔值设置。但是当我从子节点中的一个按钮关闭该组件时,我想更新父节点中的布尔值:
父组件打字稿:
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>
子组件打字稿:
export class ActivateFlyoutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
closeActivationFlyout() {
const flyout = document.getElementById('flyout');
flyout.classList.remove('active');
}
}
和子组件html:
<button (click)="closeFlyout()">Close</button>
这是一个Stackblitz。您可以看到正确单击父按钮切换类,但如何从子项中单击更新该布尔值,从而使子组件中不需要closeActivationFlyout()方法?
答案 0 :(得分:3)
像其他人提到的一样使用export default class extends Component {...}
....
import MyComponent from './MyComponent';
<MyComponent />
,但它需要发出一个事件,你还需要检查在父html中触发的事件。
这是一个有效的StackBlitz
在子组件中。
@Output()
在父组件html中。
@Output() onCloseClick = new EventEmitter();
closeFlyout() {
this.onCloseClick.emit();
}
您还可以在父组件中创建一个函数,并触发<app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''" (onCloseClick)="showFlyout = false"></app-child>
答案 1 :(得分:1)
您可以使用双向数据绑定使其正常工作:
AppComponent:
<app-child id="flyout" [(showFlyoutModel)]="showFlyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>
ChildComponent:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
@Input()
showFlyoutModel;
@Output()
showFlyoutModelChange = new EventEmitter<boolean>();
constructor() { }
ngOnInit() {
}
closeFlyout() {
this.showFlyoutModelChange.emit(!this.showFlyoutModel);
}
}
https://stackblitz.com/edit/angular-v95emc?file=app%2Fchild-component%2Fchild.component.ts