Javascript 角度4将服务从路由传递到组件

我有一个角度4应用程序。我有一个从API获取一些数据的服务，我有一个应该显示它的组件。我不知道如何将服务作为参数传递给组件。任何帮助都将不胜感激。这是我管理得最好的：

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

import { Title } from './title';

@Component({
  selector: 'home',
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  constructor(

  ) {}

  people: Person[] = [];

  ngOnInit(){
    peopleService
      .getAll()
      .subscribe(p => this.people = p)
  }
}

我遇到过这样一个例子，它显示了如何将参数传递给组件，但在我的例子中，没有任何组件包含HomeComponent，但它只在路由中注册：

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { NoContentComponent } from './no-content';

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'home',  component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
  { path: '**',    component: NoContentComponent },
];

---

为了能够在组件中使用服务，您必须

注入它。否则Angular不知道它是什么，也不知道在哪里寻找它

为了保持简单，您应该在
app.module.ts
文件中添加
服务。在
@NgModule
对象中，将
peopleService
添加到
提供者
键。像这样的

providers: [
  PeopleService
],

当然，请确保您的PeopleService是在该文件的顶部导入的

然后在
家庭组件中
需要通过
构造函数
注入服务

export class HomeComponent implements OnInit {
  people: Person[] = [];

  constructor(private peopleService: PeopleService) {
  }

  ngOnInit(){
    this.peopleService
      .getAll()
      .subscribe(p => this.people = p)
    }
}

如果你想了解DI，这是一篇非常有用的博客文章
我就是这么做的，但得到了错误错误错误：未捕获（承诺）：错误：没有PeopleService提供程序只有在我将提供程序：[PeopleService]添加到HomeComponent后，错误才消失。HomeComponent是你的
应用程序模块.ts
的一部分，这意味着它是否存在于
声明
数组中？如果不是，那就是问题所在。此外，如果您只在HomeComponent中使用此
PeopleService
，那么将其作为组件级别的提供者并没有错，但大多数情况下，我们都会使用
SharedModule
。