привязка данных angular2 между службой и свойствами компонента

Мне нужно некоторое разъяснение о привязке между свойствами службы и компонента и привязке данных в angular2

предположим, у меня есть служба (одиночка) и компонент

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();
  }
}

angular data-binding two-way angular2-services
person Han Che    schedule 06.04.2016    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Если вы обновляете элементы по ссылке (если вы что-то обновляете в свойстве object), вы увидите обновления в представлении:

export class Service {
  (...)

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

Если вы обновляете элементы по значению (если вы что-то обновляете в свойстве name), вы не увидите обновлений в представлении:

export class Service {
  (...)

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

См. этот планкр: https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview .

person Thierry Templier    schedule 06.04.2016
comment
я вижу, потому что в первом случае я создал две ссылки, указывающие на один и тот же объект, а ниже я хотел бы снова скопировать свойство? - person Han Che; 06.04.2016
comment
но подождите, значит ли это, что если у меня есть ссылочный тип данных в Service Singleton и я создаю новые ссылки, указывающие на него в различных компонентах, представление будет автоматически обновляться каждый раз, когда я его меняю?? - person Han Che; 06.04.2016
comment
@HanChe, да, все представления будут обновляться автоматически, потому что все привязки ваших шаблонов привязаны к одному и тому же / одному объекту. Все ваши компоненты имеют свои собственные ссылки, но все они указывают на одну и ту же службу Singleton, а затем все привязки шаблонов имеют свои собственные ссылки, но все они указывают на один и тот же объект в этом Singleton. Так что все работает. - person Mark Rajcok; 06.04.2016
comment
@MarkRajcok Спасибо! а вот это сохранение использовать? Есть ли серьезные подводные камни? - person Han Che; 07.04.2016

arrow_upward
7
arrow_downward

Угловая привязка работает только для привязок, объявленных в представлении (HTML).

Если вы хотите, чтобы свойства в вашем компоненте обновлялись при изменении значений в службе, вам нужно позаботиться об этом самостоятельно.

Наблюдаемые упрощают это. См. обнаружение изменения вложенного свойства для ввода компонента для примера.

person Günter Zöchbauer    schedule 06.04.2016
comment
Привет, Гюнтер, спасибо за ваш ответ, и да, я нахожусь в наблюдении, но в случае this.name = this._service.name; что он делает, это просто копия? - person Han Che; 06.04.2016
comment
Да, он копирует значение один раз при вызове ngOnInit(). Если, например, служба получает данные с удаленного сервера с помощью HTTP-запроса, в this.service.name может еще не быть значения. Если позже служба получит ответ от сервера, компонент не получит новое значение. - person Günter Zöchbauer; 06.04.2016
comment
ngOnInit() был просто примером, но тогда какая разница между использованием this.service.name и this.service.getName()? Это как в java, если я объявляю имя как приватное в службе, чтобы защитить его и использовать геттеры и сеттеры? - person Han Che; 06.04.2016
comment
Это зависит только от того, что возвращают Service.name и Service.getName(). Значение, возвращаемое свойством или методом, присваивается this.name, вот и все. Никакой Angular не задействован. Это как раз то, что делает TypeScript. - person Günter Zöchbauer; 06.04.2016

arrow_upward
0
arrow_downward

Если вы хотите, чтобы свойства в компоненте обновлялись, как только изменяется значение изменения в службе:

  1. Импортируйте DoCheck из @angular/core и ваш service в компонент.
  2. Вызов сервисных функций, влияющих на свойство компонента в ngDoCheck(){...}
  3. Вид компонента будет автоматически обновляться при любых изменениях.

Что-то вроде этого в вашем компоненте:

  ngDoCheck() {
    this.qty = this.cartService.getTotalQtyInCart();
  }
person Reza Neghabi    schedule 04.02.2018