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

我有两个模块：

1st:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

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

export class AppModule { }

2nd:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,

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

export class AppModule { }

和带有 static .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';
}

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

有几个类似的问题可以帮助你

• Angular 2，同一页面上运行的两个应用程序之间的通信 https://stackoverflow.com/questions/37611144/angular-2-communication-between-2-apps-running-on-the-same-page
• 如何动态创建引导模式作为 Angular2 组件？ https://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html-component-in-angular-2
• Angular 2引导多根组件 https://stackoverflow.com/questions/37066421/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)

笨蛋的例子 http://plnkr.co/edit/J05PAHgdZiOVlXRzbZxK?p=preview

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

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

笨蛋的例子 http://plnkr.co/edit/Ht4dYqLBnFSbACpN0rHi?p=preview

有一件重要的事情（正如@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!!!
}); 

笨蛋的例子 http://plnkr.co/edit/XeoTl85e2XFcKDJNQggK?p=preview

希望它能有所帮助！