个人中心
gpt4 book ai didi

angularjs-module - 如何在 Angular2 中使用 bootstrapModule() 引导两个模块？

转载 作者：行者123 更新时间：2023-12-03 23:38:27 25 4
gpt4 key购买 nike

通常这是模块与 main.ts 集成或引导的方式。

import {platformBrowserDynamic} from'@angular/platform-browser-dynamic'

import {AppModule} from './app.module'

platformBrowserDynamic().bootstrapModule(AppModule)

但如果我们有两个模块，请说:

  1. AppModule - 与 UI 相关的更改/修改一起工作
  2. DataModule- 用于通信/修改/显示数据相关接口(interface)

AppModule 和 DataModule 都处理 UI 修改，但考虑到各自的 UI 修改目标，我想同时使用两个模块。我该如何开始？

这种方法是否能够渲染两个模块并执行独立操作？

在index.html

 ...
 ...
 <body class="container">
  <!--Listing Selectors for loading App-Module -->
  <events-app></events-app>
  <events-list></events-list>
  <!-- listing Selectors for loading Data-Module -->
  <events-data></events-data>
  <filter-data></filter-data>
 </body>
 ...
 ...

在 ma​​in.ts

import {platformBrowserDynamic} from'@angular/platform-browser-dynamic'
import {AppModule} from './app.module'
import {DataModule} from './data.module'

platformBrowserDynamic().bootstrapModule(AppModule, DataModule)

最佳答案

好吧，我通过在 main.ts 和 tsconfig.json 中进行一些配置，在我的 Angular 4 应用程序中做了类似的事情，并且它工作得很好。您可以按照以下步骤进行尝试。

第 1 步:创建您的模块并声明您要在引导该模块时加载的根组件。

例。我在这里创建了 user.module.ts 

import { NgModule }      from '@angular/core';

// root component of usermodule
import { UserAppComponent }   from './userapp.component';

@NgModule({
  imports:[FormsModule,HttpModule],
  declarations:[UserAppComponent],
  providers:[],
  bootstrap:[UserAppComponent]
})
export class UserModule { }

第 2 步:转到 main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';

window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;

第 3 步:转到 tsconfig.json 并将新创建的模块和组件插入 "files" 数组

"files":[
    //....your other components ...//
    "myapp/user.module.ts",  
    "myapp/userapp.component.ts",           
  ]

第 4 步:现在您已准备好从 .js 文件中的任意位置引导角度模块。就像我从我的 .js 文件中这样引导一样。 Bootstrapping 可能会根据您的要求而有所不同，但步骤 1 到 3 应该相同。

window.platform.bootstrapModule(window.UserModule);

关于angularjs-module - 如何在 Angular2 中使用 bootstrapModule() 引导两个模块？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45447483/

25 4 0
文章推荐： protocol-buffers - 由 `protoc` 生成的文件中的 header 包含路径
文章推荐： entity-framework - 如何处理 EF 4.1 运行时的动态连接字符串？
文章推荐： entity-framework - Entity Framework 4 -- FunctionImport 的 ExecuteFunction 映射到 POCO 复杂类型的问题
文章推荐： perl - 二进制sed替换
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com