2016-05-15 19 views
4

Beim Lesen Online-Blog im Zusammenhang mit Angular2 stieß ich auf folgende Syntax.Angular 2 Template Syntax

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    styles: [require('./app.component.css')], 
    directives: [ ROUTER_DIRECTIVES ],   
}) 

Wie unterscheiden sich die folgenden zwei Aussagen? Was ist die Rolle der Funktion require hier?

  • Vorlage: require ('./ app.component.html ')
  • Vorlage:' ./app.component.html'

Ist in obiger Aussage lädt HTML-Vorlage erfordert asynchron?

Antwort

1

Wie unterscheidet sich folgende zwei Aussagen?

Nun benötigen, ist ein Teil von Commonjs, Das Ergebnis require('./app.component.html') wird die Vorlage string, aber templateUrl Feld den Pfad zu der .html Vorlage erwartet.

also, wenn Sie verwenden möchten als Sie template anstelle von templateUrl verwenden müssen.

gibt es verschiedene Möglichkeiten von whihc Sie Ihre Vorlage

  1. laden verwenden, erfordern Sie wie diese Vorlage zuweisen haben:

    template: require('./app.component.html'), 
    
  2. mit einfachen Weg wie folgt aus: -

    templateUrl: 'app/app.component.html', 
    
  3. durch Einstellung module.id Eigenschaft in der @ Komponent Annotation, indem Sie so eckig wird der aktuelle Ordner für die Vorlage insetad Blick auf den Stamm zu sehen. dies wie:

    @Component({ 
        selector: 'my-app', 
        moduleId: module.id, 
        templateUrl: 'app.component.html', 
        styleUrls: ['app.component.css'] 
    }) 
    

siehe hier für weitere Informationen http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

+1

Enthält diese Vorlage bedeuten: require (‘./ app.component.html ') Anweisung wird Vorlagendatei ziehen; Lese den Inhalt als String und weise ihn zur Laufzeit der Vorlage zu? Oder passiert es zur Kompilierzeit selbst? –

+0

ich weiß nicht über Laufzeit/compileTime, aber ja diese Anweisung wird Vorlage als Zeichenfolge ziehen und als Sicht anzeigen. –

0

Sie können ein Modul jetzt entweder synchron oder asynchron laden. Die synchrone Art und Weise ist die in Commonjs definiert und ziemlich einfach -

var mymod = require('myModule'); 
// Call the exported function "hello()" 
mymod.hello(); 

Dies ist die synchrone Art und Weise, Synchron Laden jedoch blockiert die Ausführung des Skripts, bis das Modul geladen wird, so könnte es besser sein, das Modul asynchron zu laden:

require('myModule', function(mymod) { 
    // Call the exported function hello 
    mymod.hello(); 
}); 

Sie auf diese Weise tun können -

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 

Einstellung moduleId: module.id im @Component Dekorateur ist hier der Schlüssel. Wenn Sie das nicht haben, wird Angular 2 nach Ihren Dateien auf der Stammebene suchen. Sie brauchen also require() nicht mehr. Hoffe, es wird helfen :)