使用共享服务更改检测angular2 [英] change detection in angular2 using shared service

问题描述

我有一个父函数 ngOnInit（）从谷歌地图得到值如下

i am having a parent function ngOnInit() which gets the value from google maps as follow

instance.input = document.getElementById('google_places_ac');
        autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);

        });

的setValue（）是与共享服务和HTML页面上，我有如下的父母和孩子一样的东西分享价值函数
＆LT;输入ID =google_places_ac[（attr.state）] =状态[（attr.country）] =coutnryNAME =google_places_ac类型=文本VALUE ={ {城市}}级=表格控/＆GT;

setValue() is function which shares value with shared service and on html page i have same thing as follow on parent and child <input id="google_places_ac" [(attr.state)]="state" [(attr.country)]="coutnry" name="google_places_ac" type="text" value="{{city}}" class="form-control" />

在父组件类我开枪的setValue changedetection（）函数

   setValue(a, b, c) {
        this.coutnry = a;
        this.state = b;
        this.city = c;
        this.sharedService.country = this.coutnry;
        this.sharedService.city = this.city;
        this.sharedService.state = this.state;
        this.cdr.detectChanges();
      //  console.log(this.coutnry, this.state, this.city);
    }

这工作得很好在父，但变化不是发生在孩子，我创建了触发儿童其中工程也将changedetection点击功能，但我希望它火automaticaly从家长有什么解决方法呢？

this works well on parent but change is not happening on child , i created a click function which fires the changedetection on child which works too but i want it to fire automaticaly from parent is there any workaround for it?

推荐答案

当涉及到共享组件之间的全局对象，最好是使用全球共享服务与 Rxjs 观察到的设计模式。这里是code，您应该根据您的配置

When it comes to sharing a global object between components, it is better to use global shared service combined with Rxjs observable design pattern. Here is the code, You should configure it according to yours:

首先，您的全球共享服务应该是这样的：

First, your global shared service should look like this:

import {Injectable} from "angular2/core";
import {Subject} from "rxjs/Subject";
@Injectable()
export class SearchService {

private _searchText = new Subject<string>();

public searchTextStream$ = this._searchText.asObservable();

broadcastTextChange(text:string) {
    this._searchText.next(text);
    }
}

二，你注入你的服务到父组件

...
constructor(private _searchService:SearchService) {
...

三，添加到提供商您的父组件或更高版本组件的服务的列表，因为这项服务应在相同的实例订阅组件之间这部分是非常重要

Third, add to the providers list of your parent component or higher component the service, because this service should the same instance between subscribed components, This part is very important:

providers: [SearchService,...]

然后，当你想要广播你叫 broadcastTextChange 新值新的变化如下：

Then when you want to broadcast new change you call broadcastTextChange with a new value as follows:

...
this._searchService.broadcastTextChange("newTextHere");
...

然后里面你的子组件你注入相同的服务和订阅它：

Then inside your the child component you inject the same service and subscribe to it:

this._searchService.searchTextStream$.subscribe(
        text => {
            // This text is a new text from parent component.
            this.localText = text;
            //Add your own logic here if you need.
        }
    )

这篇关于使用共享服务更改检测angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！