dữ liệu angular2 ràng buộc giữa dịch vụ và thành phần thuộc tính

Question

Tôi cần một số làm rõ về ràng buộc giữa dịch vụ và thành phần thuộc tính và dữ liệu ràng buộc trong angular2

giả tôi có một dịch vụ (singleton) và một thành phần

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

Nếu bạn cập nhật các yếu tố bằng cách tham khảo (nếu bạn cập nhật một cái gì đó vào object tài sản), bạn sẽ thấy những thông tin cập nhật trong giao diện:

export class Service { 
    (...) 

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

Nếu bạn cập nhật các yếu tố theo giá trị (nếu bạn cập nhật một cái gì đó vào name tài sản), bạn sẽ không thấy các bản cập nhật trong giao diện:

export class Service { 
    (...) 

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

xem plunkr này: https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview.

Answer 2

kiễu góc ràng buộc chỉ hoạt động cho các ràng buộc được khai báo trong dạng xem (HTML).

Nếu bạn muốn các thuộc tính trong thành phần của bạn được cập nhật khi các giá trị trong một dịch vụ thay đổi, bạn cần tự chăm sóc nó.

Quan sát làm cho việc này trở nên dễ dàng. Xem detect change of nested property for component input để biết ví dụ.

Answer 3

Nếu bạn muốn tính trong một bản cập nhật phần càng sớm càng có giá trị trong sự thay đổi trong một thay đổi dịch vụ:

1. nhập DoCheck từ @angular/core và service của bạn vào các thành phần .
2. Gọi chức năng dịch vụ ảnh hưởng đến tài sản thành phần trong ngDoCheck(){...}
3. Quan điểm thành phần sẽ được cập nhật tự động càng sớm càng bất kỳ thay đổi

Something như thế này trong thành phần của bạn:

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