données angular2 de liaison entre le service et les propriétés des composants

Question

j'ai besoin des éclaircissements sur la liaison entre les services et les propriétés des composants et liaison de données dans angular2

suppose avoir un service i (singleton) et un composant

export class Service { 
name = "Luke"; 
object = {id:1}; 
getName(){return this.name}; 
getObject(){return this.object}; 
} 

export class Component implements OnInit{ 
name:string; 
object:any; 
constructor(private _service:Service){} 
ngOnInit():any{ 

    //Is this 2 way binding? 
    this.name = this._service.name; 
    this.object = this._service.object; 

    //Is this copying? 
    this.name = this._service.getName(); 
    this.object = this._service.getObject(); 
    } 
} 

Answer 1

Si vous mettez à jour des éléments de référence (si vous mettez à jour quelque chose dans la propriété object), vous verrez les mises à jour dans la vue:

export class Service { 
    (...) 

    updateObject() { 
    this.object.id = 2; 
    } 
} 

Si vous mettez à jour les éléments de valeur (si vous mettez à jour quelque chose dans la name la propriété), vous ne verrez pas les mises à jour à la vue:

export class Service { 
    (...) 

    updateName() { 
    this.name = 'Luke1'; 
    } 
} 

voir cette plunkr: https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview.

Answer 2

angulaire La liaison ne fonctionne que pour les liaisons déclarées dans la vue (HTML).

Si vous souhaitez que les propriétés de votre composant soient mises à jour lorsque les valeurs d'un service changent, vous devez en prendre soin vous-même.

Les observables rendent cela facile. Voir detect change of nested property for component input pour un exemple.

Answer 3

Si vous voulez des propriétés dans une mise à jour des composants dès qu'une valeur changement dans un changement de service:

dans le composant

1. importation DoCheck de @angular/core et votre service.
2. appeler les fonctions de service affectant la propriété du composant dans ngDoCheck(){...}
3. La vue des composants sera mis à jour automatiquement dès que tout changement

Quelque chose comme ça dans votre composant:

ngDoCheck() { 
    this.qty = this.cartService.getTotalQtyInCart(); 
    }