今天完成的事情:
关于如何把css样式加载到组件中:
1.内联在模板的 HTML 中
2.设置styles或styleUrls元数据
3.通过 CSS 文件导入
元数据中的样式
给@Component装饰器添加一个styles数组型属性。 这个数组中的每一个字符串(通常也只有一个)定义一份 CSS。
@Component({
selector: 'hero-app',
template: `
<h1>Tour of Heroes</h1>
<hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}
模板内联样式
把它们放到<style>标签中来直接在 HTML 模板中嵌入样式。
@Component({
selector: 'hero-controls',
template: `
<style>
button {
background-color: white;
border: 1px solid #777;
}
</style>
<h3>Controls</h3>
<button (click)="activate()">Activate</button>
`
})
元数据中的样式表 URL
通过给组件的@Component装饰器中添加一个styleUrls属性来从外部 CSS 文件中加载样式:
@Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}
URL是相对于应用程序根目录的,它通常是应用的主页面index.html所在的地方。
模板中的 link 标签
在组件的 HTML 模板中嵌入<link>标签。
像styleUrls标签一样,这个 link 标签的href指向的 URL 也是相对于应用的根目录的,而不是组件文件。
@Component({
selector: 'hero-team',
template: `
<link rel="stylesheet" href="app/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team">
{{member}}
</li>
</ul>`
})
CSS @imports
利用标准的 CSS @import规则来把其它 CSS 文件导入到CSS 文件中。
@import 'hero-details-box.css';
使用相对 URL 加载样式
把组件的代码 (ts/js)、HTML 和 CSS 分别放到同一个目录下的三个不同文件,通过把组件元数据的moduleId属性设置为module.id,可以更改 Angular 计算完整URL的方式
@Component({
moduleId: module.id,
selector: 'quest-summary',
templateUrl: 'quest-summary.component.html',
styleUrls: ['quest-summary.component.css']
})
export class QuestSummaryComponent { }
明天计划的事情:
继续学习angular,准备小课堂
问题:
styleurls和styles属性的区别
收获:
如上
评论