Angular2 文档 - 分层依赖注入器（恢复服务）

Question

这是初学者的问题.. 我一直在阅读 Angular2 文档，我在 使用恢复服务的分层依赖注入器章节 使保存/取消功能可用于编辑。

这是服务：

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]"

问题：
令我惊讶的是，当我使用 ngModel 更新 metadata 属性值时，它可以工作 - currentItem 已更改，而 orginalItem 没有！我不明白这怎么可能？我认为 ngModel 会使用 setter 来设置 metadata 属性。但是当我设置原始数据时，setter 只被调用一次。 ngModel 怎么知道它应该只改变 currentItem 而不是 originalItem？ 这是黑魔法吗？

我知道..我只需要有人解释一下，但不幸或幸运的是只有你们！

谢谢！

Answer 1

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

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

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

现在，ngModel 获取项目 metadata 以获取其属性 languages。所以它会得到currentItem。当ngModel 设置一个新的属性值时，它不需要set metadata()。它只需要在metadata 中设置languages 属性。因此，它将再次获得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 函数注意事项：RestoreService 中的函数clone 没有以“实用”的方式克隆对象。因为它使用 JSON 解析器。有关更多详细信息和更好的克隆方法，请参阅这些问题：122102、728360