Force change detection from service with Change detection strategy as OnPush

1
votes

Our Angular2 application is using a translation service to provide translation, like this

getResourceValue(resKey: string): string {
  return this.translateService.getResourceValue(resKey);
}

The service get the translation async from API calls with each component loaded. An observable is holding all the translation async. If the translation for that key is not ready, it just returns the key. And then updates it with the right string when the translation is ready.

in Template:

getResourceValue('Page-Title')

Which works fine.

But some pages have "ChangeDetectionStrategy.OnPush". These pages won't trigger change detection when the translation data changes. Everything works without that setting.

My question is: are there ways to force the detection somewhere only for the translation?

1
angular2-servicesangular2-changedetection

1 Answers

2
votes

Thanks to angular2localization, fixed this by passing ChangeDetectorRef like this:

In the service, we have a function to load the passed in Json file and a ChangeDetectorRef object:

getTranslation(resPath: string, changeDetector?: ChangeDetectorRef): Observable<any> {
    return Observable.of(this.processTranslation(resPath, changeDetector));
    }
}

When the translation is done, the changeDetector will call markForCheck mothod;

In each component that need translation, we will call this function and pass in this component's changeDetector.

This solves the problem nicely.

Hope this can help somebody.