从 CustomElement/WebComponent 内的 Blazor 调用控制器中注入的 AngularJs 服务

Question

我正在使用 Blazor WASM 中的新功能创建自定义元素，并在 AngularJs 应用程序

中呈现它

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.RegisterAsCustomElement<TestComponent>("test-component");
await builder.Build().RunAsync();

AngularJs 控制器，您可以在其中看到注入的服务

angular.module("umbraco")
    .controller("BlazorDashboard", function ($scope, $location, userService, notificationsService) {
    var vm = this;
});

此控制器的HTML

<div ng-controller="BlazorDashboard as vm">
    <test-component></test-component>
</div>

Blazor 组件呈现正常并按预期工作。但是，我正在尝试找出一种方法可以使用来自 Blazor 组件内的 AngularJS 控制器的注入 JS 服务？在控制器中工作的方法是以下方法，它显示弹出 JS 通知。

notificationsService.error("There was an issue", "Failed");

我尝试在 Blazor 组件中执行以下操作

[Inject]
public IJSRuntime JSRuntime { get; set; }
public async Task ShowNotification()
{
    await JSRuntime.InvokeVoidAsync("notificationsService.error", "There was an issue", "Failed");
}

<button @onclick="ShowNotification">Click me</button>

但我得到以下信息

Could not find 'notificationsService.error' ('notificationsService' was undefined).

有没有办法可以将此 notificationsService 直接传递到组件中，也许作为参数？或者我可以在 Blazor 组件中调用它的另一种方式？

Answer 1

我认为问题可能是由您在 angularjs 中进行依赖注入的方式引起的。

试试这个语法，使用 $inject:

angular.module("umbraco").controller("BlazorDashboardCtrl", BlazorDashboardCtrl);

BlazorDashboardCtrl.$inject = [
   '$scope',
   '$location',
   'userService',
   'notificationsService'
];

function BlazorDashboardCtrl(
   $scope, 
   $location, 
   userService, 
   notificationsService
){
   var vm = this;
}

请注意，为了方便起见，我已将名称 BlazorDashboard 更改为 BlazorDashboardCtrl。

Answer 2

不太理想，但解决此问题的方法是将控制器注入服务传递给 window 对象，然后您可以通过 Blazor 调用它。

angular.module("umbraco")
    .controller("BlazorDashboard", function ($scope, $location, userService, notificationsService) {
    var vm = this;
    window.notificationsService = notificationsService;
});

然后像这样在 blazor 中调用它

await JSRuntime.InvokeVoidAsync("notificationsService.success", "Whoop", "notificationService called from Blazor");

从 CustomElement/WebComponent 内的 Blazor 调用控制器中注入的 AngularJs 服务

Call Injected AngularJs Service In Controller From Blazor Within CustomElement/WebComponent

angularjs

blazor

blazor-webassembly