gpt4 book ai didi

angular - Angular 2 中的多个模块

转载 作者:太空狗 更新时间:2023-10-29 17:24:49 25 4
gpt4 key购买 nike

我有一个 Angular 2 应用程序 (RC7),它最初作为单个组件,但很快以各种不同(有时完全不相关)的方式在整个项目中使用。

因此,一个单一的 NgModule 引导所有组件似乎是一个糟糕的想法,有大量的膨胀。我正在努力寻找一种方法来拥有多个模块(模块 A 将包含组件 A,模块 B 将包含组件 B,等等)并且仍然允许在单个页面上引导多个 A2 应用程序。

在实践中,我想要实现的是:

第 1 页引导模块 A - 有效

第 2 页引导模块 B - 有效

第 3 页引导模块 A 和模块 B - 这不起作用

index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script>
<script src="/angular2/systemjs.config.js"></script>


<script type="text/javascript">
System.import('appOne').catch(function(err){ console.error(err); });
System.import('appTwo').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

(function (global) {
System.config({
paths: {
'npm:': '/angular2/node_modules/'
},
map: {
appOne: '/angular2/',
appTwo: '/angular2/',
},
packages: {
appOne: {
main: './appOne.main.js',
defaultExtension: 'js'
},
appTwo: {
main: './appTwo.main.js',
defaultExtension: 'js'
},
}
});
})(this);

AppOne 和 AppTwo 的模块简单地引导相关组件(componentOne 和 componentTwo)。但是,两者不会同时呈现在同一页面上。我在控制台中没有任何错误,但是 systemjs.config.js 文件中最后列出的那个包是唯一要加载的包。

谁能看出它为什么不起作用?或者可能推荐另一种方式来构建我的模块。我宁愿没有一个包含所有组件、服务等的父模块 - 这似乎违背了 Angular 2 的嵌套组件树的要点,并且最终会成倍地影响页面加载时间。

提前致谢。

最佳答案

您可以从 AppModule 中引导一组组件,如下所示:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppComponent} from "./app.component";
import {MainSidebarComponent} from "./menus/main-sidebar.component";
import {FormsModule} from "@angular/forms";
import {appRouting} from "./app.routes";
import {DashBoardComponent} from "./dashboard/dashboard.component";
import {HomeComponent} from "./home/home.component";
import {LoginComponent} from "./login/login.component";
import {UsersModule} from "./users/users.module";
import {TopBarComponent} from "./menus/top-bar.component";

@NgModule({
imports: [
BrowserModule,
FormsModule,
appRouting,

UsersModule
],
declarations: [
AppComponent,
MainSidebarComponent,
TopBarComponent,
DashBoardComponent,
HomeComponent,
LoginComponent
],
bootstrap: [ AppComponent, MainSidebarComponent, TopBarComponent ]
})
export class AppModule { }

然后在你的 index.html 中

<!doctype html>
<head>
<base href="/">
<meta charset="UTF-8">

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body class=" sidebar_main_open sidebar_main_swipe">

<header id="header_main">
<top-bar></top-bar>
</header><


<aside id="sidebar_main">
<main-sidebar></main-sidebar>
</aside>


<div id="page_content">
<div id="page_content_inner">
<my-app>Loading....</my-app>
</div>
</div>
</body>
</html>

关于angular - Angular 2 中的多个模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39836000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com