改變根模塊之間共享數據

第一：

@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有一些道具'p aramd」，我想通過模塊觀看變化

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

模塊（第一和第二）的兩個組成部分我有構造

private ds: DumyService

。

然後，讓我們說我有一些的onclick方法在第一模塊組件的某些成分，改變

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

而且我希望有這改變了這兩個模塊。我該如何處理？

來源

2016-09-25 WebArtisan

爲什麼你想要2個根模塊？ –

因爲我需要在應用程序的不同dom部分中使用單獨的模塊。我知道，我怎樣才能運行它沒有一些組件指令 – WebArtisan

在angular1中更容易有標記的根組件。在A2中我看不到這種可能性。 A2只能通過自定義指令運行。我錯了嗎？ – WebArtisan

有幾個類似的問題，這將有助於你

主要的想法是創建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

有重要的事情（如@君特稱）

當訂閱應用程序從另一個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

希望它可以幫助天曉得！

來源

2016-09-25 13:05:36 yurzui

改變根模塊之間共享數據

回答

相關問題