我正在使用 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>
但我得到以下
找不到“notificationsService.error”（“notificationsService”未定義）。
有沒有辦法可以直接將此通知服務傳遞給組件，也許作為引數？或者我可以在 Blazor 組件中呼叫它的另一種方式？
uj5u.com熱心網友回復：
我認為這個問題可能是由你在 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 以進行約定。
uj5u.com熱心網友回復：
不理想，但解決此問題的方法是將控制器注入服務傳遞給視窗物件，然后您可以通過 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");
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/470906.html