当访问常量变量的变量在角度/打字稿中更新时，常量值会发生变化

Question

这是堆栈闪电战演示(不准确，但有点了解我想说的问题(

我已经在 src/app/constants/app.ts中定义了一个const

export const DEFAULT_FILTERS = {
"page":1,
"perPage":10,
"sortOrder": "asc",
"tag":"all",
"sortBy":"firstname"
}

我这样做是为了消除不同互连组件的混乱，我需要将过滤器定义为变量，然后使用它。

listing.component.ts

import { DEFAULT_FILTERS} from '@app/constants/app';
export class listingComponent implements OnInit, OnDestroy {
private for = someOtherconstant; // some other const used here.
private params = {
"filters": DEFAULT_FILTERS,
"for": this.for
}
getNewRecords(pageNum) {
console.log('default filters', DEFAULT_FILTERS)
this.currentPageNum = pageNum;
this.params['filters']['page'] = this.currentPageNum; 
this._service.triggerCallForUsersObservable(this.careGroupParams)
}
}

getNewRecords内部的console.log打印DEFAULT_FILTERS我已经没有更改，因为DEFAULT_FILTERS内部的页面索引仍然this.params['filters']['page'] = this.currentPageNum.为什么？

我需要一个全局const，我想为差异组件保留const，以便我可以在需要时重置过滤器值。

编辑：

如果我使用object.freeze则无法更改属性this.params喜欢：

this.params['filters']['name'] = 'xyz'

那么还有什么另一种方法可以将DEFAULT_FILTER保留为全局variable/const，然后我可以访问它或更改它并更改正在访问它但不能访问全局值的新变量？

Answer 1

您可以复制const值，而不是引用它。但是，一旦复制，它就会失去与原始值的连接;尽管如此，由于它是一个const值，因此不应该更改，因此不会有问题。

您可以使用...(展开(运算符复制对象，如下面的代码：

private params = {
"filters": { ...DEFAULT_FILTERS },
"for": this.for
}

或者，您可以使用静态属性 getter 创建一个类，该类始终返回一个新对象，这样就不会有丢失原始值的风险。

class Constants {
static get DEFAULT_FILTERS() {
return {
"page": 1,
"perPage": 10,
"sortOrder": "asc",
"tag": "all",
"sortBy": "firstname"
}
}
}
let myDefaultFilter = Constants.DEFAULT_FILTERS;
myDefaultFilter.page = 2;
Constants.DEFAULT_FILTERS.page = 3; // forcing changes
console.log(myDefaultFilter.page) // changes
console.log(Constants.DEFAULT_FILTERS.page) // stays the same

Answer 2

以下是您可以解决此问题的方法。为常量创建一个class而不是const。在其中声明一个staticgetter 变量。static这样就不必创建此类的实例来使用该常量。然后在组件类中使用它。大致如下：

常量类

export class Constants {
static get DEFAULT_FILTERS() {
"page": 1,
"perPage": 10,
"sortOrder": "asc",
"tag": "all",
"sortBy": "firstname"
}
}

组件类

import {
Component,
Input
} from '@angular/core';
import {
Constants
} from '../app/constants/app'
@Component({
selector: 'hello',
template: `<h1> {{name}}!</h1>
<button (click)='getUsers()'>click me to see change in default filters const</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
params = {
"filters": Constants.DEFAULT_FILTERS
}
getUsers() {
console.log('default filters', Constants.DEFAULT_FILTERS)
this.params['filters']['page'] = 2;
}
}

Answer 3

您可以使用深层复制，因为它为新对象分配单独的内存位置，因此在您的情况下更改"this.params"值不会更改"DEFAULT_FILTERS"中页面索引的值。

前任。 变量员工 = { 开斋节："E102"， ename："杰克"， 电子地址： "纽约"， 薪水：50000 } var newEmployee = JSON.parse(JSON.stringify(employee((;深拷贝

现在，如果我们在"newEmployee"中进行任何更改，它不会对"员工"进行任何更改，因为我们正在进行深度复制。

但如果我们只是这样做，

var newEmployee = 员工;浅拷贝

现在我们在"newEmployee"中进行任何更改，它也将反映在"员工"中，因为我们正在做浅拷贝。