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

Question

Я очищаю свой проект 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 (без действий, диспетчер, блабла)?

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

Благодарю.

Answer 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 сохраняется.