Angular 11:如何在常规ts文件中使用服务

Question

我有一个utils.ts文件，它有一些导出的函数，比如deepCopy和sortArray之类的，但我想在一些函数中使用服务，我该怎么做？

// utils.ts
export function copy(str:string){
// set clipBoard...

// here I want to use a service, how to use toastService?
// toastService.success('copied!');
}

Answer 1

我认为，只有一种方法：将util函数转换为服务的方法，并像普通服务一样在任何地方使用它。

@Injectable({
providedIn: 'root'
})
export class HelperService {
constructor(
private toastService: ToastService,
){}
public copy(str:string): void{
// set clipBoard...
// here I want to use a service, how to use toastService?
this.toastService.success('copied!');
}
}

并像这样使用：

this.helperService.copy('Something');

应该是这样，因为您需要从DI获得ToastService，而装饰器Injectable将为您完成这项工作。

Answer 2

虽然您可以在函数中创建ToastService的新实例，但我不建议使用这种方法，因为您将失去DI的所有好处。

它可能看起来如下：

export function copy(str:string){
// set clipBoard...

const toastService = new ToastService();
toastService.success('copied!');
}

相反，我建议您将utils作为一项服务，就像其他人所说的那样(IMO是最好的解决方案(，或者将公共代码提取到另一个函数中(如果可能的话(，并在两个地方都使用。它可能看起来是这样的：

shared.utils.ts:

export function toastSuccess(message: string) {
// your logic
}

toast服务.ts

import {toastSuccess} from './shared.utils';
@Injectable({providedIn: 'root'})
export class ToastService {
success(message: string) {
toastSuccess(message);
}
}

utils.ts

import {toastSuccess} from './shared.utils';
export function copy(str:string){
// set clipBoard...
toastSuccess('copied!');
}