Question

我刚刚完成了一个小型Angular 2项目，并且将我的工作与模型答案代码进行比较后，我注意到当我查看app.module.ts文件中的提供程序时，导师只包含了创建的两个服务中的一个。

users.service.ts

    import { Component, Injectable } from '@angular/core';
import { CounterService } from './counter.service';

@Injectable()
export class UserService {
    activeUsers = ['Max', 'Anna'];
    inactiveUsers = ['Chris', 'Manu'];

    constructor(private counterService: CounterService) {}

setToActive(id: number) {
    this.activeUsers.push(this.inactiveUsers[id]);
    this.inactiveUsers.splice(id, 1);
    this.counterService.incrementInactiveToActive();
}

setToInactive(id: number) {
    this.inactiveUsers.push(this.activeUsers[id]);
    this.activeUsers.splice(id, 1);
    this.counterService.incrementActiveToInactive();
    }
 }

counter.service.ts（通过@Injectable在用户服务中使用）

export class CounterService {
activeToInactiveCounter = 0;
inactiveToActiveCounter = 0;

incrementActiveToInactive() {
    this.activeToInactiveCounter++;
    console.log('Active to Inactive Count:' + this.activeToInactiveCounter);
     }
  incrementInactiveToActive() {
  this.inactiveToActiveCounter++;
  console.log('Inactive to Active Count:' + this.inactiveToActiveCounter);
    }
}

现在查看app.module.ts文件，他包含counter.service.ts服务但不包含user.service.ts服务？

app.module.ts

providers: [CounterService]

有人可以向我解释为什么他没有同时包括两者吗？非常感谢。

编辑 - app.component.ts供参考：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [UserService]
})
 export class AppComponent {
}

Answer 1

您可以将提供者注入其他提供者，组件和模块。当您在特定级别注入提供程序时，它将在该级别创建，因此为整个模块创建一次注入模块的提供程序。如果它被注入组件中，则每个组件创建一次。

在这种情况下，您可能只使用应用程序组件一次，因此最终只会创建UserService一次，但如果您在应用中使用了多个AppComponent，则每个都有自己的CounterService用户服务。但是，它们都会共享一个(，因为它会在模块级别注入。

什么时候在提供商内包含服务？

1 个答案: