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

问题描述 投票:0回答:6

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

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

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

我想在某处创建一个函数,该函数在单击图标时执行此功能,并且无需在其他组件中导入任何组件即可调用。

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

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

javascript angular function components
6个回答
16
投票

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


11
投票

您可以

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

   export function myFunction(){
        // Do something
   }

然后在其他组件中导入函数

myFunction()
。这对我来说很好,在某些情况下很有用


11
投票

这不是最好的解决方案(在我看来)。最好的解决方案是创建服务或实用程序类。

但是如果你想这样做,我建议你制作一个 JS 文件,你在你的 angular-cli.json 文件中声明在

scripts
属性下,包含你的函数。

编辑现在你已经回到了理性,这里有一个代码示例来制作实用程序类。

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

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

您可以在常量中创建任何您想要的实用程序类,然后将其放入文件中。然后,你可以把这个文件放在一个 utils 文件夹中,并用

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

否则,您可以使用诸如

之类的控制台命令来创建由 Angular 处理的服务
ng g s services/view-manager/view-manager

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

希望这有帮助!


2
投票

最推荐的方法是使用服务并在需要时注入它,但是有一种方法可以使功能可用globally.

虽然我认为这不是一个好主意,但您可以在index.html文件中添加该功能,然后无论何时要使用它,都必须使用

@ts-ignore
以避免抛出错误。 例如

index.html

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

应用程序的其他地方

// @ts-ignore
globalFunc();
  1. 列表项

2
投票

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

例如:

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!'));

我倾向于使用 RxJs,但我这样写是为了让事情更简洁。


0
投票

我使用此解决方案在我的服务中调用 google analytics gtag 函数(这是 Window 对象上的全局函数):

我将其添加到我的 AppComponent:

export class AppComponent {
  ... component stuff
}

declare global {
  interface Window {
    gtag(arg0: string, arg1: string): void;
  }
}

然后在所有需要调用那个函数的地方,添加对window的引用:

export class MyService {

  myMethod(): void {
    // do stuff...

    // then send event 
    window.gtag('event', 'details');
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.