Ändern gemeinsam genutzter Daten zwischen Modulen root

Question

I haben zwei Module:

1.:

@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 { } 

und gemeinsamen Modul mit statischen .forRoot()

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

Mein DumyServise hat etwas prop 'p aramd‘und ich will Änderungen durch Module In beiden Komponenten von Modulen (1. und 2.)

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

sehen Ich habe

private ds: DumyService 

in Konstrukteuren.

Dann lassen Sie uns sagen, dass ich in irgendeiner Komponente des ersten Moduls Komponente eine Onclick Methode haben, die

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

verändert Und ich möchte dies in beiden Modulen verändert haben. Wie kann ich damit umgehen?

Answer 1

Es gibt mehrere ähnliche Fragen, die Sie

• 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

Die Hauptidee eine Instanz von SharedService ist erstellen und als extraProviders verwenden wird helfen, wenn Bootstrapping beide Komponenten.

var sharedService = new SharedService(); 

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

Plunker Example

Vielleicht der beste Weg, eine Instanz Plattform verwendet:

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

Plunker Example

Es gibt wichtige Sache (wie @ Günter sagte)

Die abonnierende Anwendung muss die Änderungserkennung aufrufen, wenn sie einen neuen Wert von der anderen Angular-Anwendung erhält, da dieser Code in der Zone der sendenden Anwendung aufgerufen wird.

Deshalb verwende ich in den obigen Beispielen cd.detectChanges().

Aber ich möchte einen Trick zeigen. Wir können Module mit bekannten Zone bootstrap ". Auf diese Weise müssen wir uns nicht um den Anruf von detectChanges kümmern.Beide Anwendung funktioniert innerhalb eines 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

Hoffe, es hilft someway!