修改 AppComponent 组件

通过本节，你将学会了使用 Angular 组件来显示数据，并使用双花括号插值表达式显示了应用标题。

修改 app.component.ts

修改 src/app/app.component.ts 文件

将 title 修改如下：

  1. title = 'User Management（用户管理）';

完整的 app.component.ts 代码如下：

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-root',
  5.   templateUrl: './app.component.html',
  6.   styleUrls: ['./app.component.css']
  7. })
  8. export class AppComponent {
  9.   title = 'User Management（用户管理）';
  10. }

修改 app.component.html

打开组件的模板文件 src/app/app.component.html 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：

  1. <h1>{{title}}</h1>

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

浏览器自动刷新，并且显示出了新的应用标题。

修改 AppComponent 组件 - 图1

添加应用样式

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

打开 src/styles.css 文件，编写如下内容。这些样式都是 Angular 团队推荐的默认样式。

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

此时 app.component.html 便有了新样式，立马变得美观了许多：

修改 AppComponent 组件 - 图2