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

I am using the new feature in Blazor WASM to create a custom element and I am rendering it within an AngularJs app

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

The AngularJs controller, where you can see the injected services

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

The HTML for this controller

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

The Blazor component is rendering fine and working as expected. However, I'm trying to figure out a way I could use the injected JS services from the AngularJS controller within the Blazor component? A method which works in the controller is the following method, which displays a popup JS notification.

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

I have tried doing the following in the Blazor component

[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>

But I get the following

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

Is there a way I can pass this notificationsService into the component directly, maybe as a parametere? Or another way I could call it within the Blazor component?

CodePudding user response：

I think the issue might be caused by the way you are doing dependency injection in angularjs.

Try this syntaxt instead, using $inject:

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

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

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

Please notice, I've changed the name BlazorDashboard to BlazorDashboardCtrl for convention.

CodePudding user response：

Not ideal, but the way around this is to pass the controller injected service to the window object and then you can call it via Blazor.

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

Then call it in blazor like so

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