4.2 修改AppComponent组件

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

4.2.1 修改app.component.ts文件

修改src/app/app.component.ts文件，将title修改成如下：

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

代码 4-1 app/app.component.ts

4.2.2 修改app.component.html文件

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

代码 4-2 app/app.component.html

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

浏览器将会自动刷新，并且显示出新的应用标题，如图4-3所示。

4.2.3 添加应用级别的样式

大多数应用都具有一致的外观。因此，Angular CLI会生成一个空白的styles.css文件。该文件可以把所有应用级别的样式放进去。

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

代码 4-3 style.css

此时app.component.html便有了新样式，如图4-4所示。