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

Question

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

我正在开发一个 angular 应用程序，其中我在不同模块中有大约 400 个组件，几乎所有组件都具有一种相同的功能，如下所述

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

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

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

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

Answer 1

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

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

编辑现在你已经回到了理性，这里是一个制作 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 2

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

   export function myFunction(){
        // Do something
   }

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

Answer 3

1.创建你的全局函数服务，即'services'目录下的'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.希望有效... :)