Question

我有配置服务

@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的单个实例，这是我的＆＃34; app.ts＆＃34;

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

bootstrap(PageConfigComponent, [
    bind(ConfigService).toFactory(ConfigServiceFactory)
])
    .catch(err => console.error(err));

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

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

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

Answer 1

此代码在创建config时从_configService复制PageTitleComponent。除此之外，PageTitleComponent and ConfigService`之间没有任何关系。

export class PageTitleComponent {
    public pageConfig: PageConfig = null;

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

如果您使用Observable，那么感兴趣的组件可以订阅更改。

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

另请参阅https://stackoverflow.com/a/36566919/217408以获取完整示例

Answer 2

您可以执行以下操作：

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

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

2 个答案: