dati angular2 legame tra le proprietà di servizio e del componente

Question

ho bisogno di qualche chiarimento sul legame tra servizio e componenti proprietà e di dati in angular2

assumere ho un servizio (singolo) e un componente

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

Se si aggiorna gli elementi di riferimento (se si aggiorna qualcosa nella proprietà object), si vedrà gli aggiornamenti in vista:

export class Service { 
    (...) 

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

Se si aggiorna gli elementi per valore (se si aggiorna qualcosa nella name proprietà), non sarà possibile visualizzare gli aggiornamenti nella vista:

export class Service { 
    (...) 

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

Vai a questa plunkr: https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview.

Answer 2

angolare l'associazione funziona solo per i collegamenti dichiarati nella vista (HTML).

Se si desidera che le proprietà nel componente vengano aggiornate quando si modificano i valori in un servizio, è necessario prendersene cura personalmente.

Gli oggetti di osservazione lo rendono facile. Vedi detect change of nested property for component input per un esempio.

Answer 3

Se si desidera immobili a un aggiornamento dei componenti non appena un valore in cambio di un cambiamento di servizio:

1. Importa DoCheck dal @angular/core e la tua service nel componente .
2. richiamare le funzioni di servizio che interessano la proprietà del componente in ngDoCheck(){...}
3. La vista componente verrà aggiornato automaticamente non appena tutti i cambiamenti

Qualcosa di simile nel componente:

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