我在父组件上有两个子组件。我试图传递一个click事件,或更具体地说,是要检查在子组件之一中单击按钮时将其传递给另一个子组件。
父母
<app-connect-advice [memberDetails] = "memberDetails"></app-connect-advice>
<app-help-tips subtext="Before we show you your savings"></app-help-tips>
Connect-advice-component(child-1)
<div (click)="showConnectWindow = true">
<div>CONNECT</div>
</div>
Help-tips-component(child-2)
<div class="float-right pb-4 arrow-box">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.9" viewBox="0 0 24 24"><path _ngcontent-yhk-c5="" d="M6 18L18 6M6 6l12 12"></path></svg>
</div>
因此,基本上我想做的是,如果用户单击showConnectWindow
click事件,那么我想通知Help-tips-component
这已经发生。我的最终目标是根据单击click事件的时间来应用样式。
知道我在这里能做什么吗?
您可以使用 Subject(RXJS)
1-创建服务
export class InformService {
private informSource = new Subject();
informStatus$ = this.informSource.asObservable();
public warnToTipComponent() {
this.informSource.next();
}
}
2
export class AppConnectAdviceComponent{
constructor(
....
private informService: InformService) { }
public showContent(){
showConnectWindow = true;
informService.warnToTipComponent();
}
}
在app-connect-advice-component.html中:
<div (click)="showContent()">
<div>CONNECT</div>
</div>
3-在这里,我们必须订阅informStatus$
以通知用户单击showContent()
export class AppHelpTipsComponent implements OnInit , OnDestroy {
public subscription: Subscription;
constructor(
....
private informService: InformService) { }
ngOnInit() {
this.subscription= this.informService.informStatus$.subscribe(_ => {
// Here, you will notice
})
}
ngOnDestroy(): void {
if (this.subscription)
this.subscription.unsubscribe();
}
}
ngOnDestroy(): void {
if (this.subscription)
this.subscription.unsubscribe();
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句