Angular2:如何将同一服务的两个实例注入多个组件? [英] Angular2: How to inject two instances of the same service into multiple components?

问题描述

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

Suppose that I have an Angular Service that looks like this:

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

}

当前，我有几个使用剪贴板服务的组件.

Currently I have several components that uses the Clipboard Service.

当您右键单击英雄时，您可以复制/剪切它们.以后，您可以在同一组件或不同组件中粘贴英雄.像这样:

When you right click on a hero you can copy/cut them. Later, in the same component or a different component, you can paste the hero. Something like this:

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

    constructor(private clipboard: Clipboard){}

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

我现在想将拖放添加到我的组件中.有趣的是，拖放操作的canPaste，paste，cut和copy方法是相同的，但是我需要使用剪贴板的单独实例来防止出现以下情况:

I now want to add drag and drop to my components. Interestingly, the canPaste, paste, cut and copy methods are identical for drag and drop, however I need to use a separate instance of the clipboard to prevent the following scenario:

1. 用户削减了蝙蝠侠"
2. 用户拖动&将超人"放到新位置
3. 用户尝试粘贴蝙蝠侠"，但不幸的是，剪贴板已被拖放操作污染.

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

I could create a new class called DragDrop that extends the Clipboard:

@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

This allows me to update the HeroTable like this: 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);
    }
}

这也使我可以在另一个组件中使用剪贴板的两个实例，并确定哪个是哪个.我需要确保所有组件都知道哪个剪贴板应该用于剪切/粘贴，哪个剪贴板应该用于拖放.

This also allows me to use the two instances of the Clipboard in another component and tell which is which. I need to make sure that all components know which Clipboard should be used for Cut/Paste and which should be used for drag/drop.

不幸的是，这种解决方案感觉像是黑客.有没有一种Angular祝福的方式来做到这一点?

Unfortunatly, this solution feels like a hack. Is there an Angular blessed way to do this?

我发现了以下问题: Angular2:如何可以使用同一服务的多个实例?，这看起来非常相似，但是我希望鉴于所提供的详细信息，我得到的响应可能会略有不同.

I found this question: Angular2: How to use multiple instances of same Service? which seems very similar, however I am hoping that given the details that I am providing, I may get slightly different responses.

推荐答案

执行此操作的方法并不多.我认为它们已包含在引用的问题中，并且

There are not so many ways to do this. I believe they are covered in the cited question and also here.

对于没有依赖项的Clipboard可注入类，它是

For Clipboard injectable class without dependencies, it is

...
// 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可注入类，它是

For Clipboard injectable class with dependencies, it is

@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 {}

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

There should be a placeholder for the second provider any way, at least the typing will be correct in this case, but it will likely create more verbose output.

这篇关于Angular2:如何将同一服务的两个实例注入多个组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！