javascript - Angular2 文档 - 分层依赖注入(inject)器(恢复服务)

Question

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

这是服务:

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 来设置元数据属性。但是当我设置原始数据时， setter 仅被调用一次。 ngModel 如何知道它应该只更改 currentItem 而不是 originalItem？ 这就是黑魔法吗？

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

谢谢!

Answer 1

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

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

getItem() 仅返回 currentItem (克隆项)

现在，ngModel 获取项目元数据，以便获取其属性语言。所以它将获得currentItem。当ngModel设置新的属性值时，不需要设置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函数的注意事项:RestoreService中的函数clone不会克隆“实用”的方式。因为它使用 JSON 解析器。请参阅以下问题了解更多详细信息和更好的克隆方法:122102 , 728360