介绍
每个应用框架都提供不同的 HTML 组件样式设置方法。在 Angular 中，有两种方法可以保留 CSS 代码来设置组件的 HTML 模板样式。
- 保持 CSS 内联
- 将 CSS 单独保存在自己的文件中
对于每个方法，都必须使用组件元数据中的不同属性。当样式属性的数量少于 10 个左右时，应使用styles属性。如果您必须定义大量 CSS 样式，那么最好将它们放在单独的文件中，并使用styleUrls属性指向它们。
在本指南中，您将学习如何使用这两个属性来设置组件 HTML 模板的样式。您将尝试为技术事件渲染一些属性并设置 HTML 元素的样式。
先决条件
要完成本指南，您应该具有：
- 节点-12.17.0
- Angular CLI——9.0.2
- Visual Studio Code - 1.45.1
入门
创建一个 Angular 项目
- 执行以下命令创建一个 Angular 项目。
ng 新样式-演示
- 当提示向应用程序添加路由时，按N。
- 当提示选择样式表格式时，按ENTER。
在 Visual Studio Code 中打开生成的应用程序
- 单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
- 在文件对话框中，导航到生成应用程序的文件夹。
- 在此文件夹中，您应该看到一个名为styles-demo的文件夹。选择此文件夹并在文件对话框中单击“打开” 。
设置项目
安装 Twitter Bootstrap 和 jQuery 并在您的项目中引用它们，以便您可以使用一些表单样式来使表单看起来不错。
- 转到命令提示符并运行以下命令：
cd 样式-演示
- 运行以下命令安装jquery：
npm 我 jquery
- 运行以下命令安装 Bootstrap：
npm 我 bootstrap
- 在 Visual Studio Code 中，打开文件angular.json。
- 在src/style.css之前的样式数组中添加以下行。
“node_modules/bootstrap/dist/css/bootstrap.min.css”，
- 在脚本数组中添加以下几行：
“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”
- 在 Visual Studio Code 中，打开文件src > index.html。
- 在第 10 行的 body 元素中，添加以下类：
类=“容器”
最终的代码看起来应该是这样的：
<body class="container">
<app-root></app-root>
</body>
现在项目已全部准备好，可以开发事件页面了。
开发事件页面
- 在命令提示符中运行以下命令：
ng 生成组件事件缩略图
- 在 Visual Studio Code 中，打开文件src > app > event-thumbnail > event-thumbnail.component.ts，删除文件内容，并添加以下代码。请注意，styles 元数据属性已用于指定 CSS 样式。
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector:'app-event-thumbnail',
templateUrl:'./event-thumbnail.component.html',
styles:[`
.green { color:#003300 !important; }
.bold { font-weight:bold; }
.thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
.pad-left { margin-left: 10px; }
.well div { color: #bbb; }
`]
})
export class EventThumbnailComponent
{
event:any = {
name:'Ng-Europe',
date:'09/10/2020',
time:'8:00 am',
price:'200',
onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
};
}
- 在 Visual Studio Code 中，打开文件src > app > event-thumbnail > event-thumbnail.component.html，删除文件内容，并添加以下代码：
<div class="well hoverwell thumbnail">
<h2>{{event.name | uppercase}}</h2>
<div>Date: {{event.date | date}}</div>
<div>Time: {{event.time}}</div>
<div [ngSwitch]="event.time">
<span *ngSwitchCase="'8:00 am'">Early Start</span>
<span *ngSwitchCase="'10:00 am'">Late Start</span>
<span *ngSwitchDefault>Normal Start</span>
</div>
<div>Price: {{event.price | currency}}</div>
<div>
<span>Online URL: {{ event.onlineUrl }}</span>
</div>
</div>
- 在 Visual Studio Code 中，打开文件src > app > app.component.html，删除文件内容，并添加以下代码：
<app-event-thumbnail></app-event-thumbnail>
启动开发服务器
- 在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：ng serve
- 如果提示分享 Angular CLI 使用数据，请按N键表示不分享。
- 打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
- 请注意，应用所有样式后，事件缩略图均可正常呈现。
使用 styleUrls 属性
- 在 Visual Studio Code 中，打开文件src > event-thumbnail > event-thumbnail.component.ts ，从样式数组中复制所有 CSS 代码，然后将其粘贴到文件src > event-thumbnail > event-thumbnail.component.css中。最终的event-thumbnail.component.css文件应如下所示：
.green { color:#003300 !important; }
.bold { font-weight:bold; }
.thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
.pad-left { margin-left: 10px; }
.well div { color: #bbb; }
- 在 Visual Studio Code 中，打开文件src > event-thumbnail > event-thumbnail.component.ts并使用以下代码替换组件装饰器中的style属性：
styleUrls: ['./event-thumbnail.component.css']
- 请注意，在浏览器中，事件缩略图组件在应用了所有样式后仍能正常呈现。
结论
恭喜！您已使用样式和styleUrls 元数据属性来设置组件 HTML 模板的样式。有关更多信息，请参阅Angular 中的样式文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
