NG2:angular2-webpack-starter-HMR的目的是什么? [英] NG2: angular2-webpack-starter - what is the purpose of HMR?

问题描述

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

I'm cleaning up my angular2 project and for many reasons, I've decided to start with a seed. This one.

此种子使用 HMR ，但我不完全了解就是这个目的.

This seed uses HMR but I don't fully understand what is the purpose of that.

开始时，我以为HMR是关于动态加载和 在Web应用程序运行时更换组件.

At the beginning, I was thinking that HMR was about dynamical loading and replacing component while the web app is running.

但是由于我一直盯着app.service.ts，所以我迷路了.这是该服务的代码:

But since I've put my eyes on the app.service.ts, I've got lost. Here is the code of this service :

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 ));
  }
}

我当时认为服务只是提供了一个存储一些数据的空间.毕竟，这只是一个例子.

I was thinking that service simply provides a space to store some data. After all, this is just an example.

但是这行确实让我感到困惑:@HmrState() _state = { };.这项服务是否使用HMR来管理我们可以使用this.appState.set('value', value);(来自HomeComponent)进行管理的数据，就像Redux的存储(没有动作，调度程序，blabla)一样?

But this line did confuse me: @HmrState() _state = { };. Is this service using HMR to manage data that we can manage with this.appState.set('value', value); (this is from the HomeComponent) like a little Redux's store (without actions, dispatcher, blabla) ?

这里装饰器@HmrState()的目的是什么?

What is the purpose of the decorator @HmrState() here ?

谢谢.

推荐答案

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

When I had a first look at angular2-hmr I was surprised as well. I thought it is something like a hot swap, but it is not really one. At least from what I see when I use it.

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

It looks like it always reloads the application regardless of the changes type. However it can restore the state of the swapped objects. The intention of @HmrState() is to restore the component's state when the application is reloaded.

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

Let's take a look at a small example. We have a form with an input which is bound (with ngModel or formControl) to some component's property:

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

  public inputValue: string;

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

}

我们输入一些值，例如'test123'，然后单击按钮.可以.

We type in some value, e.g. 'test123' and click the button. It works.

然后我们突然意识到:日志描述丢失了.因此，我们转到我们的代码并将其添加:

Then suddenly we realise: the log description is missing. So we go to our code and add it:

@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丢失了.

Then the component's code is changed, HMR replaces it and we realise that the inputValue is lost.

要在HMR过程中恢复值，angular2-hmr需要一些有关对象状态的信息，然后才能将其清除. @HmrState()在这里起作用:指出应该恢复的状态.换句话说，要使第一个代码段与HMR一起使用，应执行以下操作:

To restore the value during the HMR process angular2-hmr needs some information about the object state before it was wiped out. Here the @HmrState() comes into play: it points out to the state that should be restored. In other words to make the first code snippet work with HMR the following should be done:

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

The state is now known to the HMR processor and it can use the state to restore our value. Now when we change the component code to:

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

it magically reloads our application and the inputValue's value is preserved.

这篇关于NG2:angular2-webpack-starter-HMR的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！