更改根模块之间的共享数据 [英] Changing shared data between root modules

问题描述

我有两个模块:

第一:

@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()的共享模块

and shared module with static .forRoot()

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

我的DumyServise有一些道具"paramd"，我想通过模块观看更改

My DumyServise has some prop 'paramd' and I want to watch changes through modules

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

在模块的两个组件(第一个和第二个)中，我都有

In both components of modules (1st and 2nd) I have

private ds: DumyService

在构造函数中.

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

Then, let's say I have some onclick method in some component of first module component, that changes

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

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

And I want to have this changes in both modules. How can I handle that?

推荐答案

有几个类似的问题可以为您提供帮助

There are several similar questions that will help you

• > Angular 2，两个应用之间的通信在同一页面上运行
• 如何动态创建引导模态作为Angular2组件?/a>
• Angular 2引导程序多根组件

• 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.

The main idea is create an instance of SharedService and use it as extraProviders when bootstrapping both components.

var sharedService = new SharedService();

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

柱塞示例

Plunker Example

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

Maybe the best way is using one instance of platform:

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

柱塞示例

Plunker Example

有重要的事情(如@Günter所说)

There is important thing(as @Günter said)

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

The subscribing application needs to invoke change detection when it receives a new value from the other Angular application because this code is invoked in the zone of the sending Application.

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

That's why i am using cd.detectChanges() in examples above.

但是我想展示一个技巧.我们可以使用已知的Zone引导模块".这样，我们不必担心detectChanges的调用.这两个应用程序都可以在一个Zone:

But i want to show one trick. We "can bootstrap module with known Zone". This way we needn't worry about the call of detectChanges. Both application will work within one 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

希望它能有所帮助！

这篇关于更改根模块之间的共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！