角度4ルートからコンポーネントにサービスを渡す

Question

私は角度4のアプリケーションを持っています。私は、APIからいくつかのデータを取得するサービスを持っており、それを表示するコンポーネントがあります。私はサービスをコンポーネントの引数として渡す方法を知らない。どんな助力も深く感謝します。これは私が管理する最善の方法です：

私はコンポーネントに引数を渡す方法を示していますが、私の場合には何のコンポーネントがHomeComponentが含まれていませんが、それは唯一のルートに登録されています this article渡って来ている

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

：

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

サービスをコンポーネントで使用できるようにするには、injectにする必要があります。そうでなければ、Angularはそれが何で、どこを探すべきかを知らない。

serviceを簡単に保存するには、app.module.tsファイルに追加する必要があります。 @NgModuleオブジェクトにpeopleServiceをprovidersキーに追加します。このようなもの。

providers: [ 
    PeopleService 
], 

もちろん、PeopleServiceがそのファイルの上にインポートされていることを確認してください。

あなたのHomeComponentには、constructorでサービスを注入する必要があります。

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

    constructor(private peopleService: PeopleService) { 
    } 

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

あなたはDI上に読みたい場合は、これは非常に便利なブログ記事 Dependency injection in Angular