angular - 在 Angular2 中传递服务作为输入

Question

我想创建一个通用列表组件，其中包含我希望所有列表都具有的几个功能。理想情况下，我想使用不同的服务作为组件的输入来呈现不同的数据集。这可能在 Angular 2 中吗？

从 angular 2 文档修改示例

@Component({
    selector: 'Generic List',
    template: 
    `
    <h2>Items</h2>
    <ul class="items">
      <li *ngFor="let item of items"
          [class.selected]="isSelected(item)"
          (click)="onSelect(item)">
        <span class="badge">{{item.id}}</span> {{item.name}}
      </li>
    </ul>
    `
})
export class GTComponent {
    @Input() someService: Service;

     items: Item[];
     private selectedId: number;

    isSelected(item: Item) { return item.id === this.selectedId; }

    onSelect(item: Item) {
    }
}

如果这是可能的，如果服务有一些名为 getItems() 的函数，我将如何使用来自服务的数据填充 items 数组返回一个 promise 。

Answer 1

我有同样的需求，最后我设法完成了实现，到目前为止似乎运作良好。
实现写在 Angular 8 .
1. 定义服务
所有将作为 @Input 传递的服务子组件应该有一个名为 getItems() 的方法，所以，首先，我创建了一个抽象类，它只包含方法的定义。这个类实际上只不过是一个通知 Angular getItems() 的容器。方法:

@Injectable()
export abstract class ItemsService {

  constructor() { }

  /**
   * Returns a list of all items
   */
  abstract getItems(): Observable<Item[]>;

} 

然后，我们可以创建我们的服务( ItemsAService ， ItemsBService ， ItemsCService )，这将实现 ItemsService ， 如下:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { ItemsService } from './items.service';
import { Item } from './item';

const ITEMS_A: Item[] = [
  // our items collection
];


@Injectable()
export class ItemsAService implements ItemsService {

  constructor() { }

  getItems(): Observable<Item[]> {
    return of(ITEMS_A);
    // of(ITEMS_A) returns an Observable<Item[]> that emits the array of mock items.
    // in real life, you'll call HttpClient.get<Item[]>() which also returns an Observable<Item[]>:
   // return this.httpClient.get<Item[]>
  }

}

... ItemsBService 的代码相同和 ItemsCService .
有关为 Angular 服务创建接口(interface)的更多信息 here .
2.父组件
我们的通用列表组件将包含在父组件中。在这个父组件中，我们将注入(inject)上述服务，如下所示:

import { Component } from '@angular/core';
import { ItemsAService } from './items-a.service';
import { ItemsBService } from './items-b.service';
import { ItemsCService } from './items-c.service';

@Component({
  ...
})

export class AppComponent  {
 
 constructor(
   public itemsAService: ItemsAService,
   public itemsBService: ItemsBService,
   public itemsCService: ItemsCService
 )  { }

}

然后，在模板中，我们有:

<app-generic-list
  name="A"
  [service]="itemsAService"
>
</app-generic-list>

<app-generic-list
  name="B"
  [service]="itemsBService"
>
</app-generic-list>

<app-generic-list
  name="C"
  [service]="itemsCService"
>
</app-generic-list>

3.通用列表组件
这个组件我们将有一个 @Input() service , 输入 ItemsService我们将调用 getItems() ngOnInit() 中服务的方法钩:

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { ItemsService } from '../items.service';
import { Item } from '../item';

@Component({
  selector: 'app-generic-list',
  ...
})

export class GenericListComponent implements OnInit, OnDestroy {
   @Input() name: string;
   @Input() service: ItemsService;

  items: Item[];
  subscription: Subscription;


  constructor() { }

  ngOnInit() {
    if (!this.service) return;
    this.subscription = this.service.getItems()
      .subscribe(items => this.items = items);
  }

  // other methods here

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

请注意，父组件和子(通用列表)组件将共享同一个服务实例。

完整示例
https://stackblitz.com/edit/angular-mgubup

我很期待知道是否有另一种更优选的方法来实现这一点。