負載組件獨立地和動態地Angular2

-1

我有2個組分A和B.當我啓動應用程序，在頁面以及組分A一個div滑動經由在DIV的局部視圖被加載。當我點擊組件A的模板中的按鈕時，另一個div滑出。我想在這個div上顯示組件B.我如何實現這一目標？我不能使用路由，因爲路由意味着我必須將這兩個組件置於父組件之下。我希望這兩個組件都是相互獨立的，但仍然存在於不同div的同一頁面上。負載組件獨立地和動態地Angular2

基本上我有一個MVC結構開始在網站的首頁。索引頁具有包含局部視圖Home.cshtml Home.cshtml->

<app1> 
 
    Loading 
 
    </app1>

此外索引頁具有包含局部視圖Contacts.cshtml另一個DIV一個div。 Contacts.cshtml->

<app2> 
 
    Loading.. 
 
</app2>

兩者的div是彼此相鄰。如何在同一頁面的不同div上同時加載兩個組件。兩個模板都只顯示一些文字。

來源

2017-01-04 Shahrukh Sayyed

請提供一些代碼。如果你不想把它放在父母的內部，你究竟想在哪裏放置這些組件。 –

你可以使用延遲加載模塊 - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load – micronyks

您可以使用這些方法

https://stackoverflow.com/a/41119253/217408

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    entryComponents: [ ComponentOne, ComponentTwo ] 
}) 
export class AppModule { 
    ngDoBootstrap(appRef: ApplicationRef) { 
    if(document.querySelector('component-one')) { 
     appRef.bootstrap(ComponentOne); 
    } 
    if(document.querySelector('component-two')) { 
     appRef.bootstrap(ComponentTwo); 
    } 
    } 
}

https://stackoverflow.com/a/39687157/217408

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

前者創建一個單一的應用程序（共享區），這使得它更容易使用共享的服務的一個通信。後者在同一頁面上創建單獨的Angular2應用程序。

來源

2017-01-04 15:46:33

這偉大的工作。你還可以告訴如何在第一個div（即第一個組件的模板）中點擊一個按鈕時在第二個div中加載第二個組件。第二個div是按鈕點擊動態創建的。 –

你可以注入到'AppModule's構造服務，並通知'關於添加另一個組件AppModule'。您將需要保持對它的引用'appRef'傳遞給'ngDoBootstrap（）'，然後在服務通知'AppModule'調用'appRef.bootstrap（OtherComponent）'。我不知道'ngDoBootstrap（）'完成後'appRef.bootstrap（...）'是否應該工作。 –

負載組件獨立地和動態地Angular2

回答

相關問題