是否可以在一个页面中多次运行一个Angular 2应用程序? [英] Is it possible to run one Angular 2 app several times in one page?
问题描述
我正在从asp.net Web表单迁移到Angular4.我正在逐步进行迁移.更换零件并将其投入生产.我在页面中多次加载相同的Angular应用时遇到问题.例如代码
I'm making migration from asp.net web forms to Angular 4. I'm making it step by step. Replacing one part and placing it in production. I face a problem with loading same Angular app several times in page. For example with code
<root tag="table-ep-component" data="5800"></root>
<root tag="table-ep-component" data="3333"></root>
页面中只有一个已加载的应用程序-第一个.我怎样才能使它们同时工作?欢迎任何建议
there is only one loaded app in the page - the first one. How can I make them work both? Any suggestions are welcome
推荐答案
您可以使用Applicationref.bootstrap
方法使其正常工作:
You can use Applicationref.bootstrap
method to do it working:
abstract bootstrap<C>(
componentFactory: ComponentFactory<C>|Type<C>,
rootSelectorOrNode?: string|any): ComponentRef<C>;
如我们所见,该方法可以采用rootSelectorOrNode
参数,因此我们可以将同一组件自举两次.
As we can see this method can take rootSelectorOrNode
parameter so we can bootstrap the same component twice.
ngDoBootstrap
方法可以帮助我们手动引导应用程序:
ngDoBootstrap
method on your root @NgModule
can help us to manually bootstrap our application:
@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);
}
}
}
另请参阅:
- Angular 2 stand alone components
- Changing shared data between root modules
- Get bootstraped component
这篇关于是否可以在一个页面中多次运行一个Angular 2应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!