Angular6学习笔记3：修改Angular组件:app.component

小灰灰 2022-05-09 01:52 295阅读 0赞

# Angular组件 #

继学习笔记2后，启动应用。浏览器出现如下界面：

![70][]

这个是由一个名称是 “`AppComponent”` 的 Angular 组件控制的。

关于组件：**组件**是 Angular 应用中的**基本构造块**。 它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

打开项目的目录：src/app ， 可以看到`AppComponent实现的三个文件：`

1.  `app.component.ts`— 组件的类代码，这是用 TypeScript 写的。
2.  `app.component.html`— 组件的模板，这是用 HTML 写的。
3.  `app.component.css`— 组件的私有 CSS 样式。

## 1.修改组件的标题： ##

1）.打开`app.component.ts（`组件的类文件`），将已有的` `title` 属性的值修改为 'Tour of Heroes'

title = 'Tour of Heroes';

2) .打开app.component.html（组件的模版文件），将Angular CLI 自动生成的默认模板。改为下列 HTML 内容

<h1>{
       {title}}</h1>

注意：**双花括号语法**是 Angular 的**插值绑定**语法。 这个插值绑定的意思是把组件的 `title` 属性的值绑定到 HTML 中的 `h1` 标记中

然后浏览器会自动刷新，出现如下界面：

![70 1][]

## 2.增加应用样式 ##

大多数应用都会努力让**整个应用保持一致的外观**。 因此，CLI 会生成一个空白的 `styles.css` 文件。 你可以把**全应用级别的样式**放进去。

进入目录： src/`styles.css `

将一下样式写入：

1.  `/* Application-wide Styles */`
2.  `h1 {`
3.  `color: #369;`
4.  `font-family: Arial, Helvetica, sans-serif;`
5.  `font-size: 250%;`
6.  `}`
7.  `h2, h3 {`
8.  `color: #444;`
9.  `font-family: Arial, Helvetica, sans-serif;`
10. `font-weight: lighter;`
11. `}`
12. `body {`
13. `margin: 2em;`
14. `}`
15. `body, input[text], button {`
16. `color: #888;`
17. `font-family: Cambria, Georgia;`
18. `}`
19. `/* everywhere else */`
20. `* {`
21. `font-family: Arial, Helvetica, sans-serif;`
22. `}`

然后浏览器刷新，出现以下界面：

![70 2][]

[70]: /images/20220509/a0d20264dbb44f9787c9846c20a45ea4.png
[70 1]: /images/20220509/c7415538b08e42a098b13c1b10d0a989.png
[70 2]: /images/20220509/79700f9465d74461b9791c53f213b3f7.png