更改根模块之间的共享数据[重复]

Question

我有两个模块：

第一个：

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

        SharedModule.forRoot()
    ],
    declarations: [
        FirstComponent
    ],
    bootstrap: [ FirstComponent ]
})

export class AppModule { }

第二个：

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

        SharedModule.forRoot()
    ],
    declarations: [
        ScndComponent
    ],
    bootstrap: [ ScndComponent ]
})

export class AppModule { }

并与静态 .forRoot() 共享模块

@NgModule( {} )
export class SharedModule {
    static forRoot() {
        return {
            ngModule    : SharedModule,
            providers   : [DumyService]
        }
    }
}

我的 DumyServise 有一些 prop 'paramd'，我想通过模块观察变化

@Injectable()
export class DumyService {
    paramd : string;
}

在模块的两个组件（第一个和第二个）中我都有

private ds: DumyService

在构造函数中。

然后，假设我在第一个模块组件的某些组件中有一些 onclick 方法，它会改变

clickToChangeParam() {
        this.ds.paramd = 'new value';
}

我想在两个模块中都进行此更改。 我该如何处理？

Answer 1

有几个类似的问题会对你有所帮助

• Angular 2, communication between 2 apps running on the same page
• How to dynamically create bootstrap modals as Angular2 components?
• Angular 2 bootstrap multi root component

主要思想是创建SharedService 的实例，并在引导两个组件时将其用作extraProviders。

var sharedService = new SharedService();

platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule)
platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule2)

Plunker Example

也许最好的方法是使用一个平台实例：

var platform = platformBrowserDynamic([SharedService]);
platform.bootstrapModule(AppModule)
platform.bootstrapModule(AppModule2)

Plunker Example

有重要的事情（正如@Günter 所说）

订阅应用程序需要调用更改检测 从另一个 Angular 应用程序接收一个新值，因为这 在发送应用程序的区域中调用代码。

这就是我在上面的示例中使用cd.detectChanges() 的原因。

但我想展示一个技巧。我们“可以用已知的Zone 引导模块”。这样我们就不用担心detectChanges的调用了。这两个应用程序都可以在一个Zone 中运行：

const platform = platformBrowserDynamic([SharedService]);
platform.bootstrapModule(AppModule).then((moduleRef: NgModuleRef<any>) => {
  const zone = moduleRef.injector.get(NgZone);
  (<any>platform)._bootstrapModuleWithZone(AppModule2, [], zone); // private method is bad!!!
}); 

Plunker Example

希望对你有所帮助！