NG2: angular2 -webpack-starter - какова цель HMR?

Я очищаю свой проект angular2 и по многим причинам, я решил начать с семени. Этот.

Это семя использует HMR, но я не совсем понимаю, в чем его цель.

Вначале я думал, что HMR - это динамическая загрузка и заменяя компонент во время работы веб-приложения.

Но поскольку я посмотрел на app.service.ts, я потерялся. Вот код этой службы:

import { Injectable } from '@angular/core';
import { HmrState } from 'angular2-hmr';

@Injectable()
export class AppState {
  // @HmrState() is used by HMR to track the state of any object during a hot module replacement
  @HmrState() _state = { };

  constructor() {

  }

  // already return a clone of the current state
  get state() {
    return this._state = this._clone(this._state);
  }
  // never allow mutation
  set state(value) {
    throw new Error('do not mutate the `.state` directly');
  }


  get(prop?: any) {
    // use our state getter for the clone
    const state = this.state;
    return state[prop] || state;
  }

  set(prop: string, value: any) {
    // internally mutate our state
    return this._state[prop] = value;
  }


  _clone(object) {
    // simple object clone
    return JSON.parse(JSON.stringify( object ));
  }
}

Я думал, что служба просто предоставляет пространство для хранения некоторых данных. В конце концов, это всего лишь пример.

Но эта строка меня смутила: @HmrState() _state = { };. Эта служба использует HMR для управления данными, которые мы можем управлять с помощью this.appState.set('value', value); (это от HomeComponent), как небольшое хранилище Redux (без действий, диспетчера, blabla)?

Какова цель декоратора @HmrState() здесь?

Спасибо.

Ответы

Ответ 1

Когда я впервые посмотрел на angular2-hmr, я тоже был удивлен. Я думал, что это что-то вроде горячей замены, но на самом деле это не так. По крайней мере, из того, что я вижу, когда использую его.

Похоже, он всегда перезагружает приложение независимо от типа изменений. Однако он может восстановить состояние обмениваемых объектов. Целью @HmrState() является восстановление состояния компонента при перезагрузке приложения.

Посмотрим на небольшой пример. У нас есть форма с входом, связанным (с ngModel или formControl) с некоторым свойством компонента:

@Component({
  template: `
    <input [(ngModel)]="inputValue" />
    <button (click)="click()">Click me</button>
  `
})
export class MyComponent {

  public inputValue: string;

  public click() {
    console.log(this.inputValue);
  }

}

Мы вводим некоторое значение, например. 'test123' и нажмите кнопку. Он работает.

Затем мы осознаем: описание журнала отсутствует. Итак, мы переходим к нашему коду и добавляем его:

@Component({
  template: `
    <input [(ngModel)]="inputValue" />
    <button (click)="click()">Click me</button>
  `
})
export class MyComponent {

  inputValue: string;

  public click() {
    console.log('inputValue:', this.inputValue);
  }

}

Затем код компонента изменяется, HMR заменяет его, и мы понимаем, что inputValue теряется.

Для восстановления значения во время процесса HMR angular2-hmr требуется некоторая информация об объекте перед его уничтожением. Здесь вступает в игру @HmrState(): он указывает на состояние, которое должно быть восстановлено. Другими словами, чтобы первый фрагмент кода работал с HMR, нужно сделать следующее:

@Component({
  template: `
    <input [(ngModel)]="state.inputValue" />
    <button (click)="click()">Click me</button>
  `
})
export class MyComponent {

  @HmrState() public state = {
    inputValue: ''
  }

  public click() {
    console.log(this.state.inputValue);
  }

}

Состояние теперь известно процессору HMR, и оно может использовать состояние для восстановления нашего значения. Теперь, когда мы меняем код компонента на:

@Component({
  template: `
    <input [(ngModel)]="state.inputValue" />
    <button (click)="click()">Click me</button>
  `
})
export class MyComponent {

  @HmrState() public state = {
    inputValue: ''
  }

  public click() {
    console.log('inputValue:', this.state.inputValue);
  }

}

он волшебным образом перезагружает наше приложение, и значение inputValue сохраняется.