Angular 4将服务从路线传递到组件

Question

I have an Angular 4 application. I have a service that fetches some data from an API and I have a component that should display it. I don't know how to pass the service as an argument to the component. Any help will be profoundly appreciated. This is the best I managed:

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)
  }
}

I've come across this article which shows how to pass arguments to components, but in my case no component contains HomeComponent, but it's only registered in the routes:

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 },
];

Answer 1

To be able to use a service in a component, you must inject it. Otherwise Angular doesn't know what it is and where to look for it.

To keep it simple you should add your service in your app.module.ts file. In the @NgModule object, add your peopleService to the providers key. Something like this.

providers: [
  PeopleService
],

Make sure that your PeopleService is imported on top of that file of course.

Then in your HomeComponent you'll need to inject the service via the constructor .

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

  constructor(private peopleService: PeopleService) {
  }

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

If you would like to read up on DI, this is a very useful blog post Dependency injection in Angular