发表于: 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属性的区别


收获:

     如上




返回列表 返回列表
评论

    分享到