带有Hostlistener的角度自定义装饰器

问题描述

我正在尝试创建一个可重用的自定义装饰器,该装饰器将包含逻辑警告,以免页面上保留未保存的数据。 目前,我在ComponentA中具有以下代码,并且可以正常工作:

  public allowNavigateAway = false;
  public clickedInside = false;

  @HostListener('click')
  clickInside() {
    this.clickedInside = true;
  }

  @HostListener('document:click',['$event'])
  clickOutside($event) {
    if (!this.clickedInside && !this.allowNavigateAway && this.isDirty()) {
      $event.preventDefault();

      //show custom confirm modal
      //if user clicks OK,then do the following:
      this.allowNavigateAway = true;
      $event.target.click();
    }
    this.clickedInside = false;
  }

  @HostListener('window:beforeunload',['$event'])
  navigateAway($event) {
    if (!this.allowNavigateAway && this.isDirty()) {
      $event.returnValue = 'You are leaving the form. All unsaved information will be lost.';
    }
  }

  public isDirty() {
    return true; //contains logic whether the component is dirty
  }

现在,我希望ComponentB具有相同的功能,唯一的区别是isDirty函数的实现。理想情况下,它将是像@WarnUnsaved()这样的组件类装饰器,但是我在实现它时遇到了麻烦?有人可以帮我吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)