NG2:angular2-webpack-starter - HMR的目的是什么？

Question

我正在清理我的angular2项目,由于很多原因,我决定从种子开始.这个.

这个种子使用HMR,但我不完全明白它的目的是什么.

一开始,我认为HMR是关于动态加载和在Web应用程序运行时替换组件.

但是既然我把眼睛放在了眼前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()？

谢谢.

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的值.