Question

这是stackblitz demo（虽然不确切，但对我要告诉的问题有所了解）

我在 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)
    }
}

console.log内的getNewRecords打印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，然后我可以访问或更改它并更改正在访问它的新变量而不是全局val的另一种方法是什么？

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。在其中声明一个static getter变量。 static，这样您就不必创建此类的实例来使用常量。然后在Component类中使用它。与此类似：

常量类

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;
  }
}

在角度/打字稿中更新访问变量const的变量时const值更改

2 个答案: