So Laden Sie mehrere angular2 Komponenten aus verschiedenen Ordnern in einem index.html Datei?

Entwickelt ich paar eckige 2-Komponenten.
die Verzeichnisstruktur für meine Anwendung ist folgende.
So Laden Sie mehrere angular2 Komponenten aus verschiedenen Ordnern in einem index.html Datei?

und ich bin das laden jeder Komponente index.html als

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

was ich getan habe ist , es muss nur ein index.html und nach dem Pfad im System.config ich in der Lage, laden Sie verschiedene Komponenten.
Ich bin in der Lage, laden Sie die Komponenten, wenn ich mich platzieren index.html innerhalb einer jeden Komponenten-Ordner,ich möchte aber nur einen index.html für alle Komponenten durch Aufruf main.ts jeder Komponente, index.html.

Folgenden sind meine code-details.

  1. index.html

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

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.Komponente.ts

JS:

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.Daten.service.ts

JS:

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

Ich habe versucht, alle Methoden, aber meine index.html nicht die Umleitung auf mein Haupt.ts laden meiner Komponente.

Schreibe einen Kommentar