Angular 6 入门之旅 ②：组件、*ngFor 指令和服务

乘风破浪，共绘新篇——Angular 6 入门之旅 ②

让我们继续探索 Angular 6 入门之旅的第二部分。上一次，我们介绍了如何设置开发环境以及创建一个新的 Angular 6 项目。这次，我们将深入研究组件的基础知识，学习如何使用 *ngFor 指令和服务来创建动态和交互式的应用程序。让我们扬帆起航，踏上 Angular 的新征程。

组件，Angular 之魂

在 Angular 中，组件是构建应用程序的基本单元。它们将数据和行为封装在一个可复用的模块中，使代码更加模块化和易于管理。每个组件都包含一个 HTML 模板、一个 TypeScript 类和一个 CSS 样式表。让我们一步一步地创建一个简单的组件来了解其工作原理。

<!-- src/app/my-component/my-component.component.html -->
<div>
  <h1>Hello, {{ name }}!</h1>
</div>

// src/app/my-component/my-component.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @Input() name: string;
}

/* src/app/my-component/my-component.component.css */
h1 {
  color: blue;
}

在这个简单的组件中，HTML 模板定义了组件的结构，TypeScript 类定义了组件的行为，而 CSS 样式表则定义了组件的外观。值得注意的是，@Input() 装饰器允许组件从外部接收数据。

*ngFor，数据遍历利器

Angular 提供了多种指令来操作 DOM，其中 *ngFor 是一个强大的数据遍历指令。它允许你在 HTML 模板中迭代一个数组或对象，并为每个元素创建一个子组件。让我们用一个例子来说明它的用法。

<!-- src/app/users/users.component.html -->
<div>
  <h1>Users</h1>
  <ul>
    <li *ngFor="let user of users">{{ user.name }}</li>
  </ul>
</div>

// src/app/users/users.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent {
  users = [
    { name: 'John' },
    { name: 'Mary' },
    { name: 'Bob' }
  ];
}

在这个组件中，*ngFor 指令用于迭代 users 数组，并为每个用户创建一个

// src/app/data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  data = 'Hello, world!';

  getData() {
    return this.data;
  }
}

// src/app/my-component/my-component.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  data: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}