Angular 4 übergibt einen Dienst an eine Komponente von Routen

Question

Ich habe eine Angular 4-Anwendung. Ich habe einen Service, der einige Daten von einer API holt, und ich habe eine Komponente, die es anzeigen sollte. Ich weiß nicht, wie ich den Dienst als Argument für die Komponente übergeben soll. Jede Hilfe wird zutiefst geschätzt. Dies ist das Beste, was ich geschafft:

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

ich über this article gekommen sind, die zeigt, wie Argumente an Komponenten passieren, aber in meinem Fall keine Komponente enthält HomeComponent, aber es ist nur in den Routen registriert:

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

Um einen Dienst in einer Komponente verwenden zu können, müssen Sie inject es. Ansonsten weiß Angular nicht, was es ist und wo es zu suchen ist.

Um es einfach zu halten, sollten Sie Ihre service in Ihrer app.module.ts Datei hinzufügen. Fügen Sie im Objekt @NgModule Ihren peopleService dem Schlüssel providers hinzu. Etwas wie das.

providers: [ 
    PeopleService 
], 

Stellen Sie sicher, dass Ihr PeopleService natürlich über diese Datei importiert wird.

Dann in Ihrem HomeComponent müssen Sie den Dienst über die constructor injizieren.

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

    constructor(private peopleService: PeopleService) { 
    } 

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

Wenn Sie auf DI lesen möchten, dann ist dies ein sehr nützliches Blog veröffentlichen Dependency injection in Angular