Question

注意：它不是用于全局变量，而是用于在所有组件上执行功能的全局通用功能

我正在开发一个角度应用程序，我在不同模块中有大约400个组件，几乎所有组件都具有与下面提到的相同类型的功能

许多页面上都有一个部分显示“如何工作”部分，可以由用户关闭，除非再次打开，否则将保持关闭状态，我已经使用我点击关闭或打开时设置的Cookie完成了图标，但此功能写在一个组件中，这需要导入其他组件

我想创建一个在点击图标时执行此功能的函数，并且可以在不导入其他组件的情况下调用它。

一种方法（我认为）可以在文件中创建一个JavaScript函数并将其加载到索引文件中，然后单击关闭并打开图标调用此函数

不确定这是否是最好的方法。希望有人能提出更好的解决方案。

Answer 1

1。在“服务” 目录下创建全局函数服务，即“ funcs.services.ts”：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class FuncsService {
  constructor() { }
  
  myGlobalAddFunction(a){
    return a++;
  }
  mySecondFunc(){
    // add more... and so on
  }
}

2。将功能导入您的组件中：

// your path may different 
import { FuncsService } from './../services/funcs/funcs.service';
//...
constructor(
   private funcs: FuncsService
) {}
ngOnInit(): void {
   let x = 1;
   myResult = this.funcs.myGlobalAddFunction(x);
   // Then you are expecting 2 for return value
}

3。希望能奏效...：）

Answer 2

这不是最佳解决方案（在我看来）。最好的解决方案是创建服务或utils类。

但是如果你想这样做，我建议你制作一个JS文件，你在scripts属性下的angular-cli.json文件中声明，包含你的函数。

编辑既然您已经回归理由，这里有一个代码示例来制作utils类。

export const IMG_UTILS = {
  convertPngToJpg = (picture: any) => {
    // Your logic here
  }
};

export const VIEW_MANAGER = {
  isAdblockActive = () => {
    // test if an ad-blocker is active
  }
};

您可以在const中创建所需的任何utils类，然后将其放入文件中。然后，您可以将此文件放在utils文件夹中，并使用

进行请求

import { VIEW_MANAGER } from 'src/app/utils/view-manager';

否则，您可以使用控制台命令（例如

）创建由Angular处理的服务

ng g s services/view-manager/view-manager

它的行为方式完全相同：您将在组件中导入它以使用它。

希望这有帮助！

Answer 3

您可以export一个写在.ts文件中的函数，然后在所有组件中调用它。

   export function myFunction(){
        // Do something
   }

然后在其他组件中导入函数myFunction()。这对我来说很好，在某些情况下可能很有用

编写全局函数以在角度中的所有组件中使用

3 个答案: