Angular2文档-层次依赖注入程序(恢复服务）

Angular2 documentation - Hierarchical Dependency Injectors ( Restore Service )

本文关键字：恢复 服务 程序 注入 文档 层次 依赖 Angular2      更新时间：2024-05-21

这是初学者的问题。。我一直在阅读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]"

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

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

谢谢！

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

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

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

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

这里有一个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解析器。有关更多详细信息和更好的克隆方法，请参阅以下问题：122102728360

相关文章：