Angular2：如何将同一服务的两个实例注入多个组件？

Question

假设我有一个如下所示的 Angular 服务：

@Injectable()
export class Clipboard {

    constructor(private multiple: Multiple, private di:DI, private injected:Injected, private things: Things){}

    // The clipboard has local state: 
    private isCut: boolean;
    private toPaste: Hero;

    cut(hero: Hero){
        this.isCut = true;
        this.toPaste = hero;
    }

    copy(hero: Hero){
        this.isCut = false;
        this.toPaste = hero;
    }

    paste(locaction: Location){
        // Lots of really complex logic
    }

    canPaste(potentialLocation: Location){
        // Lots of really complex logic
    }

}

目前我有几个使用剪贴板服务的组件。

当你右击一个英雄时你可以copy/cut他们。稍后，在同一个组件或不同的组件中，您可以粘贴英雄。像这样：

@Component({
    ...
})
export class HeroTable {

    constructor(private clipboard: Clipboard){}

    cutHero(hero: Hero): void {
        this.clipboard.cut(hero);
    }
}

我现在想为我的组件添加拖放功能。有趣的是，canPaste、paste、cut 和 copy 方法对于拖放是相同的，但是我需要使用剪贴板的单独实例来防止以下情况:

用户削减 'Batman'
用户将 'Superman' 拖放到新位置
用户尝试粘贴 'Batman' 但不幸的是剪贴板已被拖放污染。

我可以创建一个名为 DragDrop 的新 class 来扩展剪贴板：

@Injectable()
export class DragDrop extends Clipboard{

    // Drag and Drop behaves identically to the Clipboard.  Please
    // don't override any behaviour here.  This class is a hack to 
    // get a second injectable instance of Clipboard.

}

这让我可以像这样更新 HeroTable：j

@Component({
    ...
})
export class HeroTable {

    constructor(private clipboard: Clipboard, private dragDrop: DragDrop){}

    cutHero(hero: Hero): void {
        this.clipboard.cut(hero);
    }

    dragHer(hero: Hero): void {
        this.dragDrop.cut(hero);
    }
}

这还允许我在另一个组件中使用剪贴板的两个实例并分辨哪个是哪个。我需要确保所有组件都知道哪个剪贴板应该用于 Cut/Paste，哪个应该用于 drag/drop。

不幸的是，这个解决方案感觉像是一个 hack。有没有 Angular 好的方法来做到这一点？

我发现了这个问题：这看起来非常相似，但是我希望鉴于我提供的详细信息，我可能会得到略有不同的回答。

Answer 1

没有那么多方法可以做到这一点。我相信它们包含在引用的问题中，也包含 .

对于Clipboard可注入class没有依赖性，它是

...
// NgModule
providers: [
  { provide: Clipboard, useValue: Clipboard }
]

和

export class HeroTable {
    private clipboard: Clipboard;
    private dragDrop: Clipboard;

    constructor(Clipboard: Clipboard){
      this.clipboard = new Clipboard;
      this.dragDrop = new Clipboard;
    }
    ...
}

对于 Clipboard 可注入 class 具有依赖性，它是

@Injectable()
class DragDropClipboard {}

...
// NgModule
providers: [
  Clipboard,
  { provide: DragDropClipboard, useClass: Clipboard }
]

和

export class HeroTable {
    constructor(private clipboard: Clipboard, private dragDrop: DragDropClipboard) {}
    ...
}

没问题

@Injectable()
class DragDropClipboard extends Clipboard {}

第二个提供者无论如何都应该有一个占位符，至少在这种情况下输入是正确的，但它可能会产生更冗长的输出。

Angular2：如何将同一服务的两个实例注入多个组件？

Angular2: How to inject two instances of the same service into multiple components?

angular2-services

angular2-providers

angular