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

Posted 2023-02-23

【中文标题】编写全局函数以在角度的所有组件中使用

【英文标题】：Write global functions to use in all components in angular

【发布时间】：2018-04-22 12:22:29

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

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

index.html

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

应用上的其他任何地方

// @ts-ignore
globalFunc();

列表项

【参考方案2】：

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

【参考方案3】：

这不是最好的解决方案（在我看来）。最好的解决方案是创建一个服务或一个 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

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

希望这会有所帮助！

【讨论】：

是的，我想到了这个，但它会是一个 javascript 函数，我需要使用 app 中的一些变量值

哦不，一点也不！在你的导入下，你可以添加declare var myFunction: any;，现在你的函数就可以使用了。这实际上就是您在 typescript 中使用 JS 框架的方式，例如 jquery ！

我在模板 *ngIf="!storeOptionVideoStatus" 上有这个条件，我如何在 cli 文件中包含的文件中声明它以及如何在模板中使用它？

在您的文件中，您执行window['storeOptionVideoStatus'] = true;（或false，或任何您想要的），并在您的组件中，您创建一个像get storeOptionVideoStatus() return window['storeOptionVideoStatus']; 这样的getter

谢谢，解决方案是一种可执行文件，但有没有我可以阅读有关此方法和方法的文章，作为新手，如果我能正确完成它，我就不是。

【参考方案4】：

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

   export function myFunction()
        // Do something
   

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

【讨论】：

但是这个功能在组件的标记中不可用...