Question

这是初学者的问题.. 我一直在阅读Angular2文档，我遇到了一些例子 Hierarchical Dependency Injectors一章中使用Restore服务的地方使保存/取消功能可供编辑。

这是服务：

export class RestoreService<T> {
   originalItem: T;
   currentItem: T;
 setItem (item: T) {
   this.originalItem = item;
   this.currentItem = this.clone(item);
 }
 getItem () :T {
   return this.currentItem;
 }
 restoreItem () :T {
   this.currentItem = this.originalItem;
   return this.getItem();
 }
 clone (item: T) :T {
   return JSON.parse(JSON.stringify(item));
 }
}

我很兴奋，所以我自己尝试了！首先我要设置这样的值：

ngAfterContentInit(){
     this.metadata = {
      languages: this.selected_languages,
      countries: this.selected_countries,
      international: false
     }
 }
 set metadata(metadata: CvMetadata){
      this._restoreService.setItem(metadata);
 }
 get metadata(): CvMetadata{
    return this._restoreService.getItem();
 }

之后，我正在使用ngModel更改元数据属性值例如：[(ngModel)]="metadata.languages[0]"

问题：
对于我的sruprise当我使用ngModel更新元数据属性值时，它工作 - currentItem已更改且orginalItem尚未更改！我不明白这是怎么可能的？我认为ngModel会使用setter来设置元数据属性。但是当我设置原始数据时，只能调用一次setter。 ngModel如何知道它应该只更改currentItem而不是originalItem？这是黑魔法吗？

我知道......我只需要有人来解释这一点，但遗憾的是，或者幸运的是只有你们！

谢谢！

Answer 1

RestoreService：它有两个函数setter和getter;

setItem (item: T) 设置originalItem，克隆它并将克隆保存到currentItem。

getItem() 只返回currentItem（克隆项目）

现在，ngModel获取项metadata以获取其属性languages。所以它会得到currentItem。当ngModel设置新的属性值时，它不需要set metadata()。它只需要在languages内设置metadata属性。因此，它将再次获得metadata并设置languages属性。

Here is a plunker希望它会有所帮助

解释它的另一种方式：

this.metadata = {language:['english']}; // you set metadata, effectively setting originalItem and cloning it to currentItem

this.metadata.languages = ['arabic'];  // you get metadata "currentItem", set its property languages. Never actually setting metadata itself

关于clone函数的注意事项： clone中的函数RestoreService未以“实用”方式克隆对象。因为它使用JSON解析器。有关详细信息和更好的克隆方法，请参阅这些问题：122102，728360

Angular2文档 - 分层依赖注入器（还原服务）

1 个答案: