[武汉|结业弟子]JS-周恒光|2017年06月06日的日报-技能树.IT修真院

发表于： 2017-06-06 23:14:04

1 1187

今天完成的事情：

关于如何把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属性的区别

收获：

如上