按照【入门】Angular QuickStart Step4 的步骤来编辑Angular组件

1 年 ago

宇, 华

2 minutes

以下是【入门】Angular QuickStart Step3之后进行的操作

开始的步骤4：进行Angular组件的编辑。

步骤4：编辑Angular组件。

将Step3的顶部部分的”Welcome to app!”显示部分进行修改。

修改标题的文字

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!'; // ＜--ここを 'app' から変更
}

文字列已经改变。

给组件添加样式

为了给网页添加样式，您需要在 src/app/app.component.css 文件中添加以下定义。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

字体的各种设置已应用。

我们来看看其他文件吧。
在 src/app/app.component.ts 文件中
templateUrl: ‘./app.component.html’,
这里有所述，让我们打开那个文件。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

那就是这样

  <h1>
    Welcome to {{ title }}!
  </h1>

src/app/app.component.ts中的title绑定到{{ title }}。

src/app/app.component.css文件中的h1样式设置直接应用在h1标签上。

但是，app.component.html并不能代表这个页面的所有HTML内容，对吧？

有了。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

在src/app/app.component.ts文件中，有一个属性selector: ‘app-root’。

在 src/index.html 文件的倒数第三行，展开了作为组件定义的内容。

现在快速入门已经完成了。由于搭建了Angular的开发环境，现在可以运行了。接下来会继续进行教程并加深理解。