如何在 laravel 中不使用控制器的情况下从导航菜单执行功能？

Question

我正在开发一个项目，我需要能够从我的应用程序的导航菜单中执行某个功能。据我了解，所有功能都可以使用wire:click从视图中执行，这会触发关联控制器的功能。

有什么方法可以创建一个（或多个）全局函数，以便无论我所在的视图如何，都可以从导航菜单（始终加载）调用它们？

我希望我已经解释清楚了。

我尝试过使用 Ajax、Providers 等，但我不知道哪种方法是正确的。

Answer 1

供应商 创建服务

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

@Injectable({
  providedIn: 'root'
})
export class GlobalFunctionsService {
  myGlobalFunction() {
    // Logic for your global function
  }
}

在组件中注入服务

typescript
import { Component } from '@angular/core';
import { GlobalFunctionsService } from './global-functions.service';

@Component({
  // ...
})
export class NavigationMenuComponent {
  constructor(private globalFunctionsService: GlobalFunctionsService) {}

  callGlobalFunction() {
    this.globalFunctionsService.myGlobalFunction();
  }
}

从导航菜单呼叫

<button (click)="callGlobalFunction()">Execute Global Function</button>

广播服务： 创建广播服务

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

@Injectable({
  providedIn: 'root'
})
export class GlobalFunctionsBroadcastService {
  globalFunctionTriggered = new EventEmitter<any>();

  triggerGlobalFunction(data?: any) {
    this.globalFunctionTriggered.emit(data);
  }
}

从导航菜单发出事件

typescript
import { GlobalFunctionsBroadcastService } from './global-functions-broadcast.service';

@Component({
  // ...
})
export class NavigationMenuComponent {
  constructor(private broadcastService: GlobalFunctionsBroadcastService) {}

  callGlobalFunction() {
    this.broadcastService.triggerGlobalFunction();
  }
}

监听相关组件中的事件

typescript
import { GlobalFunctionsBroadcastService } from './global-functions-broadcast.service';

@Component({
  // ...
})
export class SomeComponent {
  constructor(private broadcastService: GlobalFunctionsBroadcastService) {
    this.broadcastService.globalFunctionTriggered.subscribe(() => {
      // Execute logic when function is triggered
    });
  }
}