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

Angular组件

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

这个是由一个名称是 “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 标记中

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

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. }

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