Question

我有一个Angular 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)
  }
}

我遇到了this article，其中显示了如何将参数传递给组件，但在我的情况下，没有组件包含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 },
];

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

Angular 4将服务传递给路径中的组件

1 个答案: