Html 在同一页面上的两个应用程序之间共享服务，不更新绑定

我有一个配置服务

@Injectable()
export class ConfigService {

    private config: PageConfig = new PageConfig({});

    public getConfig = (): PageConfig => {
        return this.config;
    }
}

var configInstance = null;

export function ConfigServiceFactory() {
    if (configInstance == null) {
        configInstance = new ConfigService();
    }

    return configInstance;
}

使用工厂返回ConfigService的单个实例，这是我的“app.ts”

遗憾的是，该应用程序位于两个独立的组件中（我无法更改这一点），它们都需要共享特定的配置值，现在我有了一个绑定到字符串的简单模板

@Component({
    selector: 'pagetitle',
    template: '<span>{{ pageConfig.Title }}ABC</span>',
    directives: [CORE_DIRECTIVES]
})

export class PageTitleComponent {
    public pageConfig: PageConfig = null;

    constructor(_configService: ConfigService) {
        this.pageConfig = _configService.getConfig();
    }
}

@组件({
选择器：“页面标题”，
模板：“{pageConfig.Title}}ABC”，
指令：[核心指令]
})
导出类PageTitleComponent{
publicpageconfig:pageConfig=null；
构造函数（_configService:configService）{
this.pageConfig=_configService.getConfig（）；
}
}

---

正在初始化此绑定，但它不会更改值，即使存储在ConfigService中的值正在更新。

您可以执行以下操作：

let configService = new ConfigService();

bootstrap(App, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(ConfigService, { useFactory => { configService) }), // <----
  provide(APP_BASE_HREF, { useValue: '/App/' }),
  provide(LocationStrategy, { useClass: PathLocationStrategy })
])
  .catch(err => console.error(err));

bootstrap(PageConfigComponent, [
  provide(ConfigService, { useFactory => { configService) }), // <----
])
  .catch(err => console.error(err));

让configService=new configService（）；
引导（应用程序[
HTTP_提供商，
路由器供应商，
提供（ConfigService，{useFactory=>{ConfigService）}），//console.error（err））；
引导（PageConfigComponent[
提供（ConfigService，{useFactory=>{ConfigService）}），//console.error（err））；

当创建

PageTitleComponent

时，此代码从

\u configService

复制

config

一次。此外，

PageTitleComponent和

configService`之间根本没有关系

export class PageTitleComponent {
    public pageConfig: PageConfig = null;

    constructor(_configService: ConfigService) {
        this.pageConfig = _configService.getConfig();
    }
}

如果使用可观察的

，则感兴趣的组件可以订阅更改

@Injectable()
export class ConfigService {

    config: BehaviorSubject<PageConfig> = new BehaviorSubject<PageConfig>(new PageConfig({}));

    getConfig(): PageConfig => {
        return this.config;
    }

    // set a new config
    setConfig(PageConfig config) => {
        this.config.next(config);
    }
}

---

另请参见完整示例

您好，谢谢您的回复，您能详细说明吗？编辑：所以我尝试了这个，但它仍然没有更新我的绑定。您好，似乎不起作用？-这可能是Angular 2 RC.1 Interesting的问题吗，我错过了那个问题。如果值在一个Angular应用程序中发出，在o中接收然后，发出新值的代码显然在与订阅它的代码不同的区域中运行。更改检测无法识别在其区域外运行的代码所做的更改。因此，使用

zone.run（（）=>…）

进行角度检测更改并更新视图。请参阅

@Injectable()
export class ConfigService {

    config: BehaviorSubject<PageConfig> = new BehaviorSubject<PageConfig>(new PageConfig({}));

    getConfig(): PageConfig => {
        return this.config;
    }

    // set a new config
    setConfig(PageConfig config) => {
        this.config.next(config);
    }
}

export class PageTitleComponent {

    constructor(_configService: ConfigService) {
      _configService.getConfig().subscribe(config => this.pageConfig = config);
    }
}