我遇到了一个问题,我不是异步/rxjs开发方面的专家.

让我解释一下我的问题:

我有一个Angular 服务TimeoutService,它只包含一个processTimeout()方法:


  processTimeout(timeout: NodeJS.Timeout, stillLoading: boolean): void {
    if (timeout !== undefined) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => {
        if (stillLoading) this.dialog.open(LoadingDialogComponent);
    }, this.TIMEOUT_DURATION_MS);
  }

processTimeout()执行以下操作:

  • NodeJS.Timeout为参数,stillLoading boolean.

  • 首先,它判断超时是否已经开启,如果已经开启,则将其清除.

  • 然后,我设置我的超时,如果在超时回调时,stillLoading值是true(这总是因为当我将它作为参数从componentA传递给processTimeout方法时,值是true),我会打开一个对话框,说明该请求花费了很多时间.

问题是,传递给方法的stillLoading个布尔值是我的标准Angular 组件的属性(例如,让我们将其称为具有boolean loadingA属性的ComponentA),并且我已经知道js/ts具有基本类型的传递值:

当我调用我的API服务时,它被设置为True,当加载完成时(当订阅我的API请求已经完成时),它被设置为False.

但将loadingA的值设置为False是在我从服务中调用processTimeout()方法之后发生的.

  1. 所以我的问题是,什么是最好的方法/最佳实践,这样processTimeout()中使用的布尔值将保持引用或指针(对我也一样,但我不知道Js/ts在幕后是如何工作的,但变量应该有一个内存/DOM十六进制地址),或者甚至是可观察的地址,或者是什么,这样processTimeout()中的stillLoading的值与我的componentA中的属性loadingA保持相同?(属性loadingA作为stillLoading参数传递,也是componentA中的原始boolean类型).

Because of the nature of the timeout that makes the code inside it execute after the timeout, i need the boolean value at that time (from the componentA), and not the value it was when passed-by-value in the method.
I'm down to listen to every possible solution, and if possible respecting ts and angular best practices.

  1. 在写这个问题时,我还认为我也需要为Timeout对象提供相同的解决方案(但因为它是一个对象,所以它应该已经通过引用传递了,对吗?)

谢谢.

try :老实说,我不喜欢太多,因为我更喜欢在这个问题上浪费时间之前得到一些建议,有一个 idea 是在我的componentA loadingA属性上传递一个新实例化的可观察点,但我不确定我对可观察点在这种情况下工作的方式的理解.

预期:processTimeout中的stillLoading方法参数是与我的componentA loadingA布尔属性相同的变量(相同的内存地址),或者是我可以用来满足我需要的工具上的任何解决方案/线索.

推荐答案

METHOD 1:

代码不一定需要在服务上,您可以创建包含此代码的两个子级继承的公共类.这将确保函数可以访问组件变量,因 for each 子级都有自己的作用域!

导出类公共{

  processTimeout(timeout: NodeJS.Timeout, stillLoading: boolean): void {
    if (timeout !== undefined) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => {
        if (stillLoading) this.dialog.open(LoadingDialogComponent);
    }, this.TIMEOUT_DURATION_MS);
  }

}

children

export class ParentA extends Common {
    loading: false;

    constructor(private timeoutService: TimeoutService) {
        super()
    }

    ngOnInit() {
        this.timeoutService(5000, this.loading);
        this.loading = true;
    }
}

This can be done with any number of children ren!


METHOD 2:

正如您所说,您可以通过引用传递,并确保服务具有最新的价值!

在您的组件中,您可以这样调用它

export class ParentA {
    loadingWrapper = {
        loading: false,
    }

    constructor(private timeoutService: TimeoutService) {}

    ngOnInit() {
        this.timeoutService(5000, this.loadingWrapper);
        this.loadingWrapper.loading = true;
    }

}

在您的服务中,您可以将其更改为

  processTimeout(timeout: NodeJS.Timeout, stillLoadingWrapper: {loading: boolean}): void {
    if (timeout !== undefined) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => {
        if (stillLoadingWrapper.loading) this.dialog.open(LoadingDialogComponent);
    }, this.TIMEOUT_DURATION_MS);
  }

Typescript相关问答推荐

了解TS类型参数列表中的分配

即使子网是公共的,AWS CDK EventBridge ECS任务也无法分配公共IP地址

如何在第一次加载组件时加载ref数组

如何缩小变量访问的对象属性范围?

泛型类型,引用其具有不同类型的属性之一

我可以为情态车使用棱角形的路由守卫吗?

如何在编译时为不带常量的参数引发错误

使用Redux Saga操作通道对操作进行排序不起作用

是否将自动导入样式从`~/目录/文件`改为`@/目录/文件`?

如何编写在返回函数上分配了属性的类型安全泛型闭包

将具有Readonly数组属性的对象接口转换为数组

在Mac和Windows上运行的Web应用程序出现这种对齐差异的原因是什么?(ReactNative)

在Cypress中,您能找到表格中具有特定文本的第一行吗?

从类型脚本中元组的尾部获取第n个类型

如何使用TypeScrip在EXPO路由链路组件中使用动态路由?

Angular NG8001错误.组件只能在一个页面上工作,而不是在她的页面上工作

将类型脚本函数返回类型提取到VSCode中的接口

带有';的类型脚本嵌套对象可选属性错误满足';

为什么类方法参数可以比接口参数窄

如何在 ngFor 循环中以Angular 正确动态渲染组件