NG2：angular2-webpack-starter - HMR的目的是什麼？

我正在清理我的angular2項目，由於很多原因，我決定從種子開始。 This one。NG2：angular2-webpack-starter - HMR的目的是什麼？

該種子使用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()在這裏的目的是什麼？

謝謝。

來源

2016-06-28 Clément Flodrops

當我第一次看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的值。

來源

2016-08-10 14:22:44 smnbbrv

NG2：angular2-webpack-starter - HMR的目的是什麼？

回答

相關問題