1

假设我有一个如下所示的 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
    }

}

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

当您右键单击英雄时，您可以复制/剪切它们。以后，在同一个组件或者不同的组件中，都可以粘贴英雄。像这样的东西：

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

    constructor(private clipboard: Clipboard){}

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

我现在想向我的组件添加拖放功能。有趣的是，拖放的,和 方法是相同的，但是我需要使用剪贴板的单独实例来防止以下canPaste情况：pastecutcopy

  1. 用户剪辑“蝙蝠侠”
  2. 用户将“超人”拖放到新位置
  3. 用户尝试粘贴“蝙蝠侠”，但不幸的是剪贴板已被拖放污染。

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

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

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

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

不幸的是，这个解决方案感觉就像一个黑客。有没有一种 Angular 有福的方式来做到这一点？

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

4

1 回答 1

3

没有太多方法可以做到这一点。我相信它们已包含在引用的问题和此处。

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

...
// 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具有依赖关系的可注入类，它是

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

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

于 2016-10-04T23:25:54.393 回答