एनजी 2: कोणीय 2-वेबपैक-स्टार्टर - एचएमआर का उद्देश्य क्या है?

Question

मैं अपनी कोणीय 2 परियोजना को साफ कर रहा हूं और कई कारणों से, मैंने बीज के साथ शुरू करने का फैसला किया है। This one।

यह बीज HMR का उपयोग करता है, लेकिन मैं पूरी तरह से समझ में नहीं आता है कि का उद्देश्य है क्या।

शुरुआत में, मैं सोच रहा था कि एचएमआर डायनामिक लोडिंग और वेब ऐप चल रहा है, जबकि घटक को प्रतिस्थापित कर रहा था।

लेकिन चूंकि मैं 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 = { };। क्या यह सेवा एचएमआर का उपयोग डेटा प्रबंधित करने के लिए कर रही है जिसे हम this.appState.set('value', value); (यह होमकंपोनेंट से) के साथ प्रबंधित कर सकते हैं जैसे कि रेडक्स की दुकान (बिना क्रियाओं, प्रेषक, ब्लब्ला के)?

डेकोरेटर यहाँ @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 खो दिया है।

एचएमआर प्रक्रिया 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); 
    } 

} 

यह जादुई रूप से हमारे एप्लिकेशन को पुनः लोड करता है और इनपुट वैल्यू का मान संरक्षित होता है।