Angular在更新与全局变量重复的局部变量时出现问题

Question

我有一个全局文件，我存储了所有需要在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也正在更新。但在这里，我试图只更新组件内部的局部变量。只有在用户确认之后，我才想更新全局变量。

我缺少的东西是什么，我如何在我的组件中复制全局数据。请帮助

Answer 1

当您传递全局值时，您创建了一个浅拷贝，这意味着this.favBook和this.gc.userData.favBook都引用相同的内存地址。你可以在这里阅读更多信息。

如果你想有单独的值，你需要创建一个深拷贝。在这种情况下，JSON.parse(JSON.stringify(this.gc.userData.favBook))可能会做到这一点。或者使用Sam在注释中同时写入的数组的展开运算符