2015-12-22 1 views
11

ich eine Komponente wie folgt zu schaffen: (von der Probe)Wie `angular2` eine Komponente exportiert?

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1> ~ My First Angular 2-0 App By Gulp Automation ~ </h1>' 
}) 

export class AppComponent { } //what it is exporting here? 

und an ein anderes Modul einge:

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' //what it's imports here 

bootstrap(AppComponent); //it works. 

in index.html:

<script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', //what is means? 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app/boot') 
      .then(null, console.error.bind(console)); 
    </script> 

I Ich bin nicht in der Lage, die dahinter liegende Logik zu verstehen. Hilft mir bitte jemand?

danke im voraus.

Antwort

5

helfen denke ich, dass diese Links könnte Ihnen helfen: https://angular.io/guide/quickstart und https://daveceddia.com/angular-2-dependencies-overview/.

Tatsächlich ist SystemJS dafür verantwortlich, die Modullogik und die Verbindung zwischen ihnen zu implementieren. Deshalb müssen Sie die SystemJS-Datei (systemjs) in Ihre HTML-Seite einfügen und sie mit System.config konfigurieren und schließlich die Hauptkomponente Ihrer Angular2-Anwendung mit System.import laden.

Sie verwenden SystemJs beim Start explizit System.import. In anderen Elementen Ihrer Anwendung wird das Tool implizit verwendet, insbesondere wenn Sie TypeScript verwenden. In diesem Fall genügt ein einfacher import, um ein anderes Modul zu importieren. Wenn Sie sich die übertragenen Dateien (JavaScript-Dateien) ansehen, werden Sie sehen, dass SystemJS verwendet wird.

Der Anhang SystemJS Konfiguration (https://angular.io/docs/ts/latest/quickstart.html#!#systemjs) Sie über die Konfiguration von SystemJS einige Hinweise geben könnte für eine Angular2 Anwendung

Hier ist der Link zu der Dokumentation in Bezug auf Modulformate (das format Attribut im System.config Block) : https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md. Wenn Sie den Wert register für das Attribut format verwenden, geben Sie System.register an, um Module zu definieren.

Hoffe, es hilft Ihnen, Thierry

1

Komponente wie ein Modul, das einen Code innerhalb und andere Modul ist die Verpackung zu verwenden, wenn u dieses „Modul“

exportieren
import {AppComponent} from './app.component' 

AppComponent ist der Name der Klasse, angular2 wissen die Komponentennamen „AppComponent“ dass gedient, ‚./app.component‘ bedeutet „gleiche Verzeichnis und die Datei finden namens‚app.component.ts‘

ich bin neu in NG2, hoffen, kann es u

+0

also, 'import' nimmt ganze Datei statt der Klasse. ist es? – user2024080

+0

Import "Modulname" aus "Bibliothek" macht Sinn, wenn Sie OOP Sprache wie Python gelernt haben, "Bibliothek" vielleicht eckige Bibliothek wie "eckig2/Kern" ../ common .. etc, sonst können Sie lokal importieren Modul wie "app.component" mit ../, ../../, ./ dieses Muster – mckit

2

Export Klasse AppComponent {} // was es hier exportiert?

export class AppComponent { }

Der Export Aussage sagt Typoskript, dass dies ein Modul, deren AppComponent Klasse ist öffentlich und zugänglich zu anderen Modulen der:

Dies wird (kurz) in der Architecture Overview Führung erklärt Anwendung.

Wenn wir einen Verweis auf das AppComponent benötigen, importieren wir es so:

import {AppComponent} from './app.component';

Die Import-Anweisung teilt das System es ein AppComponent aus einem Modul namens app.component bekommen kann in einem benachbarten gelegen Datei. Der Modulname (AKA-Modul-ID) ist oft derselbe wie der Dateiname ohne seine Erweiterung.

Verwandte Themen