Angular2文档 - 层次依赖性喷油器（还原服务）

这是初学者的问题.. 我一直在阅读Angular2文档，我碰到例如在层次依赖性注射器章，其中还原服务被用于化妆保存/取消提供的功能来进行编辑。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]"

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

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

谢谢！

来源

2016-04-12 Chakijs Terzētājs

'ngModel'不会'设置/获取'''''''''''''''''''''''对象本身。但'语言[0]'项目。 – Abdulrahman

@Abdulrahman真的不能与此争论，但那不是我混乱的根源。它如何只改变currentItem或..此外，RestoreService如何提供该功能？ –

RestoreService：它有两个功能setter和getter;

setItem (item: T)套originalItem，它的克隆和克隆保存到currentItem。

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

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

Here is a plunker希望这将有助于

解释它的另一种方式：在clone功能

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不是在“实用克隆对象“ 办法。因为它使用JSON解析器。有关更多详细信息和更好的克隆方法，请参见以下问题：122102,728360

来源

2016-04-12 12:13:49 Abdulrahman

我刚刚测试过，你是对的！这是它的混乱部分......“用getter来设置东西”，但是当我想到它时，它现在非常合理。再次感谢您解释它！ –

@ChakijsTerzētājs非常欢迎。我很高兴能够有所帮助。 – Abdulrahman

Angular2文档 - 层次依赖性喷油器（还原服务）

回答

相关问题