Свойство объекта с эллипсисом вместо точки: Object = {... Object}

Question

В угловом проекте 4 есть эта строка кода this.config = { ...this.config }.После некоторой проверки кажется, что она не изменилась this.config.Но удаление этой строки нарушает обнаружение изменений для this.config.

Вот компонент, который использует объект

<dp-date-picker config="config"> </dp-date-picker>

Это единственная функция, котораямодифицирует this.object

  private updateConfig(value, key) {
   if (!this.config) {
      this.config = {};
   }
   this.config[key] = value;
   this.config = { ...this.config }; // why does this work?
  }

Кто-нибудь может объяснить, что делает this.config = { ...this.config }?

Answer 1

Когда вы создаете объект, вы создаете ссылку на память.Распространение объекта в другой создает копию этого объекта, но в другой ссылке на память.

Представим себе это:

const obj = { id: 1, sub: { id: 11 } };
const copy = { ...obj };

console.log(obj === copy); // false
console.log(obj.sub === copy.sub); // true
console.log(obj.id === copy.id); // true

Как видите, оба объекта не имеют одинаковую ссылку на память, но подчиненные объекты имеют, и значения примитивов сравниваются как значения, а не как ссылки,

Это означает, что при записи

this.config = { ...this.config };

Вы фактически создаете новую ссылку на память, удаляя предыдущую.

В Angular создание новой ссылки на память вызывает обнаружение изменений.Если вы удалите часть кода, больше ничего не произойдет, потому что вы касаетесь ссылки на память в объект (подобъект), а не на сам объект.

Чтобы активировать обнаружение изменений, вы можете использовать расширение или функцию ChangeDetectorRef.prototype.detectChanges.

Надеюсь, он ответил на ваш вопрос!