更新从全局变量复制的局部变量时的角度问题答案

【问题标题】：Angular Issue in updating local variable that is duplicated from global variable更新从全局变量复制的局部变量时的角度问题
【发布时间】：2021-09-22 17:47:55
【问题描述】：

我有一个全局文件，其中存储了所有需要在 angular 中不同组件之间共享的全局变量

export class GlobalContext {
    userData: any
    
    setUserData(user) {
        this.userData = user
    }
}

在我的组件中，我将它分配给一个局部变量，如下所示

import {GlobalContext} from './globalContext.ts';

export class CreateEditComponent implements OnInit {
    favBook = [];
    constructor(private readonly gc: GlobalContext){}
    ngOnInit(): void {
        favBook = this.gc.userData.favBook;
    }
}

这里的favBook是全局文件和组件中的数组。

现在当我在我的组件中使用 favBook 并将一些数据推送到它时，如下所示

this.favBook.push('Test 123');

userData.favBook 下的全局数据也在更新。但在这里我试图只更新组件内的局部变量。只有在用户确认后，我才想更新全局变量。

我缺少什么以及如何在我的组件中复制全局数据。请帮忙

【问题讨论】：

复制您的数组以分配给局部变量 - favBook = [...this.gc.userData.favBook]
非常感谢@Sam。它奏效了

标签： angular global-variables local-variables

【解决方案1】：

当您分配全局值时，您会创建一个浅拷贝，这意味着this.favBook 和this.gc.userData.favBook 都引用相同的内存地址。您可以阅读有关此here 的更多信息。

如果你想有单独的值，你需要创建一个深拷贝。在这种情况下，JSON.parse(JSON.stringify(this.gc.userData.favBook)) 可能会成功。或者在 Sam 的评论中同时写的带有数组的扩展运算符。

【讨论】：