Angular 2模板語法

在閱讀與Angular2相關的在線博客時，我遇到以下語法。Angular 2模板語法

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

以下兩種說法有何不同？這裏需求函數的作用是什麼？

模板：要求（ './ app.component.html '）
模板：' ./app.component.html'

在上述聲明中的負載是否需要HTML模板異步？

來源

2016-05-15 Pankaj Kapare

以下兩種說法有何不同？

那麼需要爲CommonJS的一部分，的require('./app.component.html')的結果將是模板字符串，但templateUrl場預計路徑.html模板。

所以如果你打算使用require，你必須使用template而不是templateUrl。

有由whihc您可以加載您的模板

使用要求你必須分配到模板像這樣不同的方式：
```
template: require('./app.component.html'), 
```

使用這樣的簡單路徑： -

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

通過設置module.id property in the @component註釋，通過這樣做angular將查看當前文件夾中的模板insetad查看根目錄。像這樣：
```
@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
```

來源

2016-05-16 07:02:09

這是否意味着模板：要求（」 ./ app.component。html'）語句將拉取模板文件;以字符串的形式讀取其內容並在運行時將其分配給模板？還是在編譯時本身發生？ –

我不知道運行時/ compileTime，但是這個語句將拉模板作爲字符串，並顯示爲視圖。 –

您現在可以同步或異步加載模塊。同步方式是一個在CommonJS的定義非常簡單 - 這是同步的方式，同步加載然而塊腳本執行，直到模塊加載

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

，所以它可能是更好的異步加載模塊：

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

你可以做到這一點的方式 -

import {Component} from 'angular2/core'; 

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

設置的moduleId：module.id在@Component裝飾是這裏的關鍵。如果你沒有，那麼Angular 2會在根目錄下查找你的文件。所以你不需要require（）了。希望它會有所幫助:)

來源

2016-05-16 04:28:14

Angular 2模板語法

回答

相關問題