是否可以在一個頁面中多次運行一個Angular 2應用程序？

我從asp.net web表單到角4.進行遷移我正在一步一步來。更換一個零件並將其投入生產。我在頁面中多次加載相同的Angular應用程序時遇到問題。例如，使用代碼是否可以在一個頁面中多次運行一個Angular 2應用程序？

<root tag="table-ep-component" data="5800"></root> 
<root tag="table-ep-component" data="3333"></root>

頁面中只有一個加載的應用程序 - 第一個。我怎樣才能讓他們同時工作？任何建議，歡迎

來源

2017-08-26 IAfanasov

爲什麼你需要相同的應用程序多次，而不是一個應用程序內的同一部件多次？ – jonrsharpe

主要頁面的標記是由asp.net web表單到目前爲止已經產生，我們不接近完全遷移到Angular4。 Asp.net web表單告訴這個組件應該在這個地方。一些組件是Angular4應用程序。有時它應該是在不同地方的一個頁面中的幾個Angular4組件。有沒有發現其他實際生活的做法，從Web形式角一步一步遷移，不能一步到位遷移 - 太多工作的一個步驟。 – IAfanasov

您可以根據第一個需求渲染一次應用程序，並將需要的組件放入其中。當這部分不需要時，您隱藏標籤並與系統的其他部分一起工作。下一次你需要角度表單時，你顯示根容器並將其他表單放入它。你怎麼看？只是想法，我不知道該怎麼做:) –

您可以使用Applicationref.bootstrap的方法做它的工作：

abstract bootstrap<C>(
    componentFactory: ComponentFactory<C>|Type<C>, 
    rootSelectorOrNode?: string|any): ComponentRef<C>;

我們可以看到這種方法可以採取rootSelectorOrNode參數，所以我們可以引導同一個組件的兩倍。在你的根@NgModule

ngDoBootstrap方法可以幫助我們手動引導我們的應用程序：

@NgModule({ 
    declarations: [AppComponent], 
    imports: [BrowserModule], 
    entryComponents: [AppComponent] 
}) 
export class MenuModule { 
    ngDoBootstrap(appRef: ApplicationRef) { 
    const rootElements = document.queryselectorAll('root'); 
    // cast due to https://github.com/Microsoft/TypeScript/issues/4947 
    for (const element of rootElements as any as HTMLElement[]){ 
     appRef.bootstrap(AppComponent, element); 
    } 
    } 
}

參見：

來源

2017-08-26 15:30:33 yurzui

它看起來像我需要的東西，除了ngDoBootstrap不叫。放置console.log其中。我在AoT生產模式下使用Angular CLI進行編譯調查它爲什麼不叫它 – IAfanasov

您應該從NgModule元數據中移除引導屬性 – yurzui

是否可以在一個頁面中多次運行一個Angular 2應用程序？

回答

相關問題