时间戳

首页 > 解决方案 > 如何在服务中移动函数？

angular - 如何在服务中移动函数？

问题描述

我有这个函数，我用它来改变一个控件的值，这取决于另一个控件的值。由于我在几个组件中使用了这个函数，我想我应该把它移到一个服务中并从那里调用它。问题是我必须订阅 formControl 的 valuechanges。所以我的问题是，

如何重写此函数，以便我可以在服务内部使用它，而无需在服务内部订阅？

这是我的功能：

  setDefault(formarray: FormArray, index: number, sourceCtrl:string, targetCtrl:string ) {
        formarray.at(index)
            .get(sourceCtrl)
            .valueChanges
            .pipe(takeUntil(this._destroy))
            .subscribe(value => {
                if (value !== null && value !== "" && value !== undefined) {
                    formarray.at(index)
                        .get(targetCtrl)
                        .setValue(this.default);
                } else {
                    formarray.at(index)
                        .get(targetCtrl)
                        .setValue(null);
                }
            });
    }

标签： angularobservable

解决方案

就像jonrsharpe说你可以返回一个observable. 无论您在哪里取消订阅，都不应该成为问题，因为每个订阅都是他们自己的。

但是我看到代码中的代码subscribe也可以重复，所以也许你可以利用面向对象的编程。

创建一个基类：

export class BaseFormClass() {
 setDefault(formarray: FormArray, index: number, sourceCtrl:string, targetCtrl:string ) {
        formarray.at(index)
            .get(sourceCtrl)
            .valueChanges
            .pipe(takeUntil(this._destroy))
            .subscribe(value => {
                if (value !== null && value !== "" && value !== undefined) {
                    formarray.at(index)
                        .get(targetCtrl)
                        .setValue(this.default);
                } else {
                    formarray.at(index)
                        .get(targetCtrl)
                        .setValue(null);
                }
            });
    }
}

并且任何需要此功能的组件都可以扩展BaseFormClass。

export class Component1 extends BaseFormClass implements OnInit {
  ngOnInit() {
    this.setDefault(......);
  }
}

推荐阅读