Angular 2允许使用`字符来引用它们来编写多行模板.也可以将多行模板放入.html文件中并引用它templateUrl.
将模板直接放入组件中似乎很舒服,因为它只是在一个地方,但这样做有什么缺点吗?
第一种方法:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>
`
})
export class AppComponent { }
Run Code Online (Sandbox Code Playgroud)
vs第二种方法:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: 'multi-line.html'
})
export class AppComponent { }
Run Code Online (Sandbox Code Playgroud)
连同multi-line.html:
<h1>My First Angular 2 multiline template</h1>
<p>Second line</p>
Run Code Online (Sandbox Code Playgroud) 在搜索时我发现了一些名为moduleId设置模板和CSS文件的相对路径的东西,但我moduleId不确切知道如何在我们的angular2组件中使用?
实际上,问题出在我的文件夹结构中.我从dist文件夹加载我的所有.js文件,而我的视图(.html文件)在src文件夹中.所以当我使用moduleId: module.id像这样的角度从dist文件夹,而不是src文件夹采取路径.
所以这里有人帮我告诉我如何为我的组件angualr2设置自定义moduleId?
我的文件夹结构是这样的.
App
/\
/ \
(.js + .map files)Dist Src(.ts + .html + .css files)
Run Code Online (Sandbox Code Playgroud)
实际编码(工作) -
@Component({
selector: 'class-timing',
templateUrl: 'src/components/TimeTable/class-timing/class-timing.html',
styleUrls: ['src/app.css']
})
Run Code Online (Sandbox Code Playgroud)
修改编码(由于路径不正确而无法工作) -
@Component({
selector: 'class-timing',
templateUrl: 'class-timing.html',
moduleId: module.id,
styleUrls: ['src/app.css']
})
Run Code Online (Sandbox Code Playgroud)
参考本教程 http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/