Issue
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?
Solution
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");
Answered By - YodasMyDad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.