如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？ [英] How to Load multiple angular2 components from different folders in one index.html file?
问题描述
我开发了几个角度2组件。
我的应用程序的目录结构如下。
I have developed few angular 2 components. the directory structure for my application is following.
我正在从index.html加载每个组件
and I am loading each component from index.html as
<script>
System.config({
map: { 'rxjs': 'node_modules/rxjs' },
packages: {
app: { format: 'register', defaultExtension: 'js' },
'rxjs': {defaultExtension: 'js'}
}
});
System.import('component_1/app/main')
.then(null, console.error.bind(console));
</script>
我所做的是，必须只有一个index.html并且根据里面提供的路径 System.config 我将能够加载不同的组件。
如果我将index.html放在每个组件文件夹中，我可以加载组件，但我想通过调用每个组件文件夹的 main.ts ，只对所有组件使用一个index.html来自index.html的组件。
what I have done is , there must be only one index.html and according to the path provided inside System.config I will be able to load different components. I am able to load the components if I am placing index.html inside each components folder,but i want to use only one index.html for all components by calling main.ts of each component from that index.html.
以下是我的代码详情。
- index.html
<html>
<head>
<title>Angular 2 TypeScript App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet" />
<link href="node_modules\bootstrap\dist\css\style.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
map: { 'rxjs': 'node_modules/rxjs' },
packages: {
app: { format: 'register', defaultExtension: 'js' },
'rxjs': {defaultExtension: 'js'}
}
});
System.import('component_1/app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
2.main .ts
2.main.ts
import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
HTTP_PROVIDERS
]);
3.app.component.ts
3.app.component.ts
import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import { DataService } from '../app/services/data.service';
@Component({
selector: 'my-app',
providers: [DataService],
template: '<h1>{{record.data}}</h1>',
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
export class AppComponent {
public record;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData()
.subscribe((customers:any[]) => {
this.record = customers;
});
}
}
4.data.service.ts
4.data.service.ts
import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import 'rxjs/add/operator/map';
@Injectable()
export class DataService {
constructor(private http: Http) { }
getData() {
return this.http.get('../../uicomponent.json')
.map((res: Response) => res.json());
}
}
我已尝试过所有方法，但是我的index.html没有重定向到我的main.ts来加载我的组件。
I have tried all methods, but my index.html is not redirecting to my main.ts to load my component.
推荐答案
你应该定义每个 component_ * 进入SystemJS配置的文件夹：
You should define each component_* folder into your SystemJS configuration:
<script>
System.config({
map: {
'rxjs': 'node_modules/rxjs'
},
packages: {
'component_1': { format: 'register', defaultExtension: 'js' },
'component_2': { format: 'register', defaultExtension: 'js' },
(...)
'rxjs': {defaultExtension: 'js'}
}
});
System.import('component_1/app/main')
.then(null, console.error.bind(console));
这样你就可以在您的导入中使用组件_ * （例如 component_1 ）。
This way you will be able to use the component_* (for example component_1 in your imports).
如果您想保留配置并能够使用所有组件，则应移动应用程序下的文件夹... 组件_ * 文件夹
If you want to keep your configuration and be able to use all components, you should move your component_* folders under the app folder...
这篇关于如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
