NG2：angular2-webpack-starter - HMRの目的は何ですか？

Question

私は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 = { };。このサービスは、少しReduxの店舗（アクション、ディスパッチャ、blablaなし）のようにthis.appState.set('value', value);（これはHomeComponentから）で管理できるデータを管理するHMRを使用していますか？

デコレータ@HmrState()の目的は何ですか？

ありがとうございました。

Answer 1

私がangular2-hmrを最初に見たとき、私は驚いていました。私はそれがホットスワップのようなものだと思ったが、それは本当は一つではない。少なくとも私がそれを使うときに見えるものから。

変更の種類に関係なく常にアプリケーションをリロードするようです。ただし、スワップされたオブジェクトの状態を復元できます。 @HmrState()の目的は、アプリケーションがリロードされたときにコンポーネントの状態を復元することです。

小さな例を見てみましょう。我々はいくつかの値を入力

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

    public inputValue: string; 

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

} 

、例えば：我々はいくつかのコンポーネントのプロパティに（ngModel又はformControlで）結合された入力を有する形態を有します'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の値が保持されます。