Angular2组件开发—为模板应用样式（一）

时间 2019-11-25

标签 angular2 angular 组件开发模板应用样式栏目 AngularJS 繁體版

原文原文链接

styles - 设置模板样式

组件既然处于UI层，就应当好看些，好看是构造良好用户体验的一部分。Angular2的组件模板基于HTML，那么显然，咱们须要经过样式表/CSS来调整组件的外观。javascript

和模板相似，咱们有两种方法为组件设置CSS样式：css

1. 内联样式html

能够使用组件View注解的styles属性来设置内联样式：java

1 @View({
2  styles:[` 3         h1{background:#4dba6c;color:#fff}     
4  `] 5 })

2. 外部样式bootstrap

也能够把样式定义在单独的文件中：angular2

1 /*ez-greeting.css*/
2 h1{background:#4dba6c;color:#fff}

而后使用View注解的styleUrls属性来引入外部样式：app

1 @View({
2    styleUrls:["ez-greeting.css"] 3 })

例如：spa

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>template- styles</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <ez-app></ez-app>
12     <script type="module">
13         import {Component,View,bootstrap} from "angular2/angular2";
14         
15         @Component({selector : "ez-app"})
16         @View({
17  styles:[` 18                 div.ez-greeting{font-family:Courier;background:#ede7f6;box-shadow:0 2px 5px 0; }
19                 h1{background:#4dba6c;color:#fff;text-align: center}     
20                 div.content{padding:10px;}
21  `], 22             template : `
23                 <div class="ez-greeting">
24                     <h1>Hello,Angular2</h1>
25                     <div class="content">
26                         <p>
27                             使用ES6开发Angular2应用的一个好处就是，能够不用拼接样式字符串了。
28                         </p>
29                         <ul>
30                             <li>在样式中能够使用任何标准的CSS语法</li>
31                             <li>若是样式定义在单独的文件里，能够使用styleUrls引入</li>
32                         </ul>
33                     </div>
34                 </div>
35             `
36         })
37         class EzApp{}
38         
39         bootstrap(EzApp);
40     </script>
41 </body>
42 </html>

结果以下：code