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

Question

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

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

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

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

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

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

Answer 1

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.希望有效... :)

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() 。 这对我来说很好，在某些情况下很有用

Answer 4

最推荐的方法是使用服务并在需要时注入它，但是有一种方法可以让函数全局可用。

虽然我认为这不是一个好主意，但你可以在 index.html 文件中添加该函数，然后每当你想使用它时，你必须使用@ts-ignore以避免抛出错误。 例如

索引.html

<script>
  function globalFunc(){
    alert(2)
  }
</script>

应用程序上的其他任何地方

// @ts-ignore
globalFunc();

1. 项目清单

Answer 5

只是为了加入可能重复的答案，尽管更加充实......我有一个我使用的实用程序类。

例如：

export class Utilities {
    // Simple promise wrapper for setTimeout. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#creating_a_promise_around_an_old_callback_api
    public static Wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
}

该类通过import语句在组件中引用：

import { Utilities } from 'path/to/Utilities';

然后你可以这样调用你的静态方法：

Utilities.Wait(30000)
    .then(() => DoStuff())
    .catch(() => console.log('Darn!'));