Als ich einen ersten Blick auf angular2-hmr warf, war ich auch überrascht. Ich dachte, es ist so etwas wie ein heißer Austausch, aber es ist nicht wirklich einer. Zumindest von dem, was ich sehe, wenn ich es benutze.
Es sieht so aus, als ob es die Anwendung unabhängig vom Änderungstyp immer neu lädt. Es kann jedoch den Status der vertauschten Objekte wiederherstellen. Die Absicht von @HmrState() ist, den Zustand der Komponente wiederherzustellen, wenn die Anwendung neu geladen wird.
Werfen wir einen Blick auf ein kleines Beispiel. Wir haben eine Form mit einem Eingang, der (mit ngModel oder formControl) um einige Komponente Eigenschaft gebunden ist:
@Component({
template: `
<input [(ngModel)]="inputValue" />
<button (click)="click()">Click me</button>
`
})
export class MyComponent {
public inputValue: string;
public click() {
console.log(this.inputValue);
}
}
wir in einem gewissen Wert eingeben, z.B. "test123" und klicken Sie auf die Schaltfläche. Es klappt.
Dann plötzlich erkennen wir: die Protokollbeschreibung fehlt. Also gehen wir zu unseren Code und fügen Sie ihn:
@Component({
template: `
<input [(ngModel)]="inputValue" />
<button (click)="click()">Click me</button>
`
})
export class MyComponent {
inputValue: string;
public click() {
console.log('inputValue:', this.inputValue);
}
}
Dann Code der Komponente geändert wird, HMR ersetzt es und wir erkennen, dass die inputValue verloren.
Um den Wert während des HMR-Prozesses wiederherzustellen, benötigt angular2-hmr einige Informationen über den Objektstatus, bevor er gelöscht wurde. Hier kommt die @HmrState() ins Spiel: Sie weist auf den Zustand hin, der wiederhergestellt werden soll. Mit anderen Worten: die erste Code-Abschnitte mit HMR machen sollte Folgendes geschehen:
@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);
}
}
Der Staat nun dem HMR-Prozessor bekannt ist, und es kann den Zustand nutzen, um unseren Wert wiederherzustellen. Nun, wenn wir den Komponentencode ändern:
@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);
}
}
es auf magische Weise neu lädt unsere Anwendung und den Wert des Inputvalue bleibt erhalten.