如何在 Angular 6 组件中注入服务？

在 Angular 6 中，通过依赖注入(Dependency Injection)的方式来完成服务注入。依赖注入是一种设计模式，它的核心思想是从应用程序中剥离出依赖关系，从而提高代码的可重用性和可维护性。

步骤

1. 创建服务

创建你想要注入的服务。在这个例子中，我们创建一个名为 UserService 的简单服务。

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users: string[] = ['张三', '李四', '王五'];
  
  getUsers(): string[] {
    return this.users;
  }
  
  addUser(user: string): void {
    this.users.push(user);
  }
}

2. 注册服务提供者

在你的服务上方添加注入标记 @Injectable。这个标记告诉 Angular 这个服务可以被注入。如果你的服务是在 root 模块中使用的，那么将 providedIn 属性设置为 root。

在注册服务提供者时，也需要引入你的服务，并将其添加到 providers 数组中。

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ...
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件中注入服务

在你的组件构造函数中引入你的服务，然后将其注入到私有变量中即可。注意，你需要将服务类的名称作为参数传递给构造函数，才能让 Angular 正确地找到并注入你的服务。

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  users: string[] = [];
  
  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

4. 使用服务

现在，你已经在组件中成功地注入了你的服务，可以像下面这样使用它。

this.userService.addUser('赵六');

this.users = this.userService.getUsers();

总结

在 Angular 6 中，通过依赖注入的方式注入服务是很容易的。只需要创建服务、注册服务提供者、在组件中注入服务并使用它即可。依赖注入让我们的代码更加可维护，更容易重构。