Question

我开发了几个角度2组件。我的应用程序的目录结构如下。

我将index.html中的每个组件加载为

<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 html的。

以下是我的代码详情。

的index.html

＆＃13;

<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>

＆＃13;

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

＆＃13;

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;
        });   
  }  
}

＆＃13;

4.data.service.ts

＆＃13;

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());
    }
}

＆＃13;

我已尝试过所有方法，但我的index.html没有重定向到我的main.ts来加载我的组件。

Answer 1

您应该将每个component_*文件夹定义到SystemJS配置中：

<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_*（例如component_1）。

如果您想保留配置并能够使用所有组件，则应将component_*文件夹移到app文件夹下...

如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？

1 个答案: