将点击事件从一个子组件传递到另一个子组件

Skydev

我在父组件上有两个子组件。我试图传递一个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>

因此,基本上我想做的是,如果用户单击showConnectWindowclick事件,那么我想通知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();
  }

}

这里的Stackblitz

更新

为了防止内存泄漏,您必须在ngOnDestroy挂钩中取消订阅它
  ngOnDestroy(): void {
    if (this.subscription)
      this.subscription.unsubscribe();
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Vue.js:将数据从一个子组件传递到具有相同父组件的另一个子组件吗?

来自分类Dev

如何在VueJS中将值从一个子组件传递到另一个子组件?

来自分类Dev

如何在React中将数据值从一个子组件传递到另一个子组件?

来自分类Dev

如何将回调从一个子组件传递到另一个

来自分类Dev

如何将子组件路由到另一个子组件

来自分类Dev

如何知道另一个子组件中一个子组件的事件

来自分类Dev

将点击事件从一个组件绑定到另一个组件

来自分类Dev

如何基于事件使用React将一个子react / html组件替换为另一个子组件?

来自分类Dev

将两个结果在一个子传递到另一个子

来自分类Dev

如何将数据从一个子组件传递给父组件和其他子组件?

来自分类Dev

如何从一个单独的子组件修改一个子组件的道具?

来自分类Dev

如何在 VBA 中将字段的设置变量名称从一个子例程传递到另一个子例程?

来自分类Dev

想要将值从子组件传递给父组件,然后将这些值传递给另一个子组件

来自分类Dev

将值从子窗体传递到另一个子窗体

来自分类Dev

AngularDart 将切换事件从一个组件传递到另一个组件

来自分类Dev

将轴限制从一个子图(“相等”方面)复制到另一个子图中

来自分类Dev

XLST:将ID从一个子节点复制到另一个子节点

来自分类Dev

如何从子组件访问 Angular 4 中的另一个子组件

来自分类Dev

将数据从一个组件传递到另一个组件

来自分类Dev

我想在react中访问另一个子组件中一个子组件的值

来自分类Dev

使用useReducer调度一个子组件中的操作并更新另一个子组件中的状态

来自分类Dev

如何访问另一个子组件中插槽的内容

来自分类Dev

将数据从一个组件传递到另一个 Angular 2

来自分类Dev

React Native - 将数据从一个组件传递到另一个

来自分类Dev

React Native ScrollView - 如何从另一个子组件按钮滚动到子组件?

来自分类Dev

将包含另一个子布局的子布局从一个占位符移动到另一个占位符

来自分类Dev

如何在.htaccess中从一个子域重定向到另一个子域?

来自分类Dev

数组的元素不会传递到另一个子

来自分类Dev

将数据从一个子布局发送到Sitecore中的另一个子布局

Related 相关文章

  1. 1

    Vue.js:将数据从一个子组件传递到具有相同父组件的另一个子组件吗?

  2. 2

    如何在VueJS中将值从一个子组件传递到另一个子组件?

  3. 3

    如何在React中将数据值从一个子组件传递到另一个子组件?

  4. 4

    如何将回调从一个子组件传递到另一个

  5. 5

    如何将子组件路由到另一个子组件

  6. 6

    如何知道另一个子组件中一个子组件的事件

  7. 7

    将点击事件从一个组件绑定到另一个组件

  8. 8

    如何基于事件使用React将一个子react / html组件替换为另一个子组件?

  9. 9

    将两个结果在一个子传递到另一个子

  10. 10

    如何将数据从一个子组件传递给父组件和其他子组件?

  11. 11

    如何从一个单独的子组件修改一个子组件的道具?

  12. 12

    如何在 VBA 中将字段的设置变量名称从一个子例程传递到另一个子例程?

  13. 13

    想要将值从子组件传递给父组件,然后将这些值传递给另一个子组件

  14. 14

    将值从子窗体传递到另一个子窗体

  15. 15

    AngularDart 将切换事件从一个组件传递到另一个组件

  16. 16

    将轴限制从一个子图(“相等”方面)复制到另一个子图中

  17. 17

    XLST:将ID从一个子节点复制到另一个子节点

  18. 18

    如何从子组件访问 Angular 4 中的另一个子组件

  19. 19

    将数据从一个组件传递到另一个组件

  20. 20

    我想在react中访问另一个子组件中一个子组件的值

  21. 21

    使用useReducer调度一个子组件中的操作并更新另一个子组件中的状态

  22. 22

    如何访问另一个子组件中插槽的内容

  23. 23

    将数据从一个组件传递到另一个 Angular 2

  24. 24

    React Native - 将数据从一个组件传递到另一个

  25. 25

    React Native ScrollView - 如何从另一个子组件按钮滚动到子组件?

  26. 26

    将包含另一个子布局的子布局从一个占位符移动到另一个占位符

  27. 27

    如何在.htaccess中从一个子域重定向到另一个子域?

  28. 28

    数组的元素不会传递到另一个子

  29. 29

    将数据从一个子布局发送到Sitecore中的另一个子布局

热门标签

归档