angular - 如何在 Angular 2 中保留存储在给定服务实例的引用变量中的值？

Question

我正在我的应用程序中实现剪贴板。在我的服务中，我有两种方法，copy 和paste。 copy() 将源文件夹和源项目作为参数，而 paste() 将目标文件夹作为参数。 在我的复制方法中，我将参数值保存在服务级别私有(private)变量中，稍后在我的粘贴方法中使用它们。

当我按下 Ctrl + C 时，我调用带有参数的复制方法，然后当我按下 Ctrl + V 时，我调用带有参数的粘贴方法目标文件夹。

当我的目标文件夹与我的源文件夹相同时，我的逻辑工作正常并且我存储在引用中的值仍然存在于剪贴板服务的实例变量中。但是，当我的目标文件夹不同时，服务中的变量未定义。

我认为我在实现过程中遗漏了一些细节。如果我处理得当，谁能帮我解决这个问题？

这是我的代码:

export class ClipService {
    private srcFolder;
    private srcItem;

    constructor() {
    }

    copy(srcFolder, srcItem) {
        this.srcFolder = srcFolder;
        this.srcItem = srcItem;
    }

    paste(destFolder) {

    }

}

在另一个类中，我导入了这个类，在构造函数中创建了它的一个新实例，然后按如下方式调用它:

@Component({
 selector: 'new-comp',
 templateUrl: 'new-comp.html'
})
export class NewComp {

private clipboard: ClipService;

constructor(){
 this.clipboard = new ClipService();
}

private keydown(event: KeyboardEvent) {
        if (event.defaultPrevented) return;
        let folder = this.folder.json;
        let item = folder.activeItem;
        if (event.ctrlKey && event.keyCode === 67) {
            this.clipboard.copy(folder, item);
        } else if (event.ctrlKey && event.keyCode === 86) {
             this.clipboard.paste(this.finder.activeFolder);
        }
    }
}

非常感谢任何帮助。谢谢。

Answer 1

您不应该那样使用 Angular 服务。您应该使用依赖注入(inject)才能使用它们。

您的问题的解决方案是:

constructor(private clipboard: ClipService){}

按照您的方式，每次实例化组件时，您都在创建不同的服务。这样，angular DI 系统会为您提供对服务的相同实例的引用，该实例由 Angular 框架实例化和管理。

Check out this stackblitz for an example

长话短说:

服务在 OOP 术语中是单例，是一个类的实例，只应实例化一次。如果您尝试实例化多个实例，那么您正在做一些单例所不期望的事情。单例，就像全局变量:一种在程序中共享状态的方法。为了更容易地管理单例的实例化而不会出错，存在 DI(依赖注入(inject))机制/框架。一个这样的框架以 Angular 存在，并在需要时自动实例化单例服务，并确保与需要访问该服务的每个组件(或组件的实例)共享该实例。