typescript - NG2 : angular2-webpack-starter - what is the purpose of HMR?

我正在清理我的angular2项目，由于许多原因，我决定从种子开始。 This one。

该种子使用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()的目的是什么？

谢谢。

最佳答案

当我第一次看angular2-hmr时，我也很惊讶。我认为这有点像热插拔，但实际上并非如此。至少从我使用它时所见。

看起来无论更改类型如何，它总是会重新加载应用程序。但是，它可以恢复交换对象的状态。 @HmrState()的目的是在重新加载应用程序时恢复组件的状态。

让我们看一个小例子。我们有一个带有输入的表单，该表单的输入(绑定(bind)到ngModel或formControl)绑定(bind)到某个组件的属性:

@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处理器现在知道该状态，并且可以使用该状态恢复我们的值(value)。现在，当我们将组件代码更改为:

@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的值。

关于typescript - NG2 : angular2-webpack-starter - what is the purpose of HMR?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38078353/