角2のテンプレート構文

Question

Angular2に関連するオンラインブログを読んでいるうちに、私は次の構文に遭遇しました。

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

次の2つのステートメントはどのように違いますか？ここで必要な機能の役割は何ですか？

• テンプレート：（ './ app.component.html '）
• テンプレートが必要です。' ./app.component.html' を

上記のステートメント負荷にHTMLテンプレートを非同期的に必要としていますか？

Answer 1

次の2つのステートメントはどのように違いますか？

まあCommonJSの一部であり、require('./app.component.html')の結果はテンプレート文字列になり、 しかしtemplateUrlフィールドは.htmlテンプレートへのパスを期待必要です。

したがって、あなたがtemplateUrlの代わりにtemplateを使用する必要があります。

あなたはこのようにテンプレートに割り当てる必要があります必要が使用して、テンプレート

1. を読み込むことができますwhihcによってさまざまな方法があります。このような単純なパス使用

   template: require('./app.component.html'), 
   

2. を： -

   は、

   templateUrl: 'app/app.component.html', 
   

3. module.idプロパティを@componentアノテーションを行うと、angleは現在のフォルダ を見て、ルートを見るためのテンプレートを表示します。このように：

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

は、このテンプレートを意味しています詳細はhttp://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

Answer 2

モジュールを同期または非同期でロードできるようになりました。同期の方法は、CommonJSで定義された1と非常に簡単です -

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

これは、同期の方法は、同期ロードがブロックスクリプトの実行がモジュールがロードされるまで、非同期にモジュールをロードした方がよいかもしれません。

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

あなたはこの方法を行うことができます -

モジュールIDを設定

import {Component} from 'angular2/core'; 

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

：@Componentデコレータでmodule.idはここで重要です。あなたがそれを持っていなければ、Angular 2はあなたのファイルをルートレベルで探します。あなたはもうrequire（）する必要はありません。希望すると助けてくれるでしょう:)