Угловая проблема при обновлении локальной переменной, которая дублируется из глобальной переменной

#angular #global-variables #local-variables

Вопрос:

У меня есть глобальный файл, в котором я храню все глобальные переменные, которые необходимо разделить между различными компонентами в 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 также обновляются. Но здесь я пытаюсь обновить только локальную переменную внутри компонента. Только после подтверждения от пользователя я хочу обновить глобальную переменную.

Что это за вещь, которой мне не хватает, и как я могу дублировать глобальные данные в своем компоненте. Пожалуйста, помогите

Комментарии:

1. Сделайте клон вашего массива для присвоения локальной переменной — favBook = [...this.gc.userData.favBook]

2. Большое спасибо @Sam. это сработало

Ответ №1:

При определении глобального значения вы создаете поверхностную копию, что означает, что и this.favBook то, и другое, и this.gc.userData.favBook ссылка на один и тот же адрес памяти. Вы можете прочитать дополнительную информацию об этом здесь.

Если вы хотите иметь отдельные значения, вам нужно создать глубокую копию. В этом случае JSON.parse(JSON.stringify(this.gc.userData.favBook)) , вероятно, сработало бы. Или оператор распространения с массивом, как это написано между тем в комментарии Сэма.