问题描述
我正在清理我的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 andreplacing 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的目的是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!