在 Blazor Razor 页面中加载 AngularJS page/controller

Question

我的团队有一个大小适中的 AngularJS 应用程序，我们希望使用 Blazor webassembly 对其进行现代化改造，并且我认为加载 AngularJS 控制器和页面应该没有问题，如果所有已加载相关 javascript 库。

我已经成功地以我“认为”可行的方式整合了所有内容，

<body ng-app="testApp">

在 blazor index.html 页面上

并尝试通过 razor 页面和 ng-controller 标签加载我们的基本搜索。

@page "/search"

<div ng-controller="searchCtrl as ctrl">

令人惊讶的是，所有 angularjs 代码和库似乎都能正确加载，而且我在控制台中没有收到任何错误。当我转到 /search 页面并且 AngularJS 似乎无法识别 ng-controller 标签时出现问题，因为控制器本身未加载。

我正在深入研究 blazor 处理 javascript 库的实际方式，但我的猜测是 angular 已加载但未附加到“真实”DOM 并且它没有得到让它知道新页面已加载的事件。

请注意，我们没有使用 angularjs 路由器，但 angularjs 应该可以很好地从 ng-controller 标签动态加载控制器。

有人对我可以尝试的事情有任何想法吗？

Answer 1

尝试这样的事情：

添加到index.html的正文：

<script type="text/javascript">
    function reinitAngular() {
        var injector = $('[ng-app]').injector();
        var $compile = injector.get('$compile');
        var $rootScope = injector.get('$rootScope');
        $compile(this.$el)($rootScope);
        $rootScope.$digest();
    }
</script>

在你的 Razor page/component 添加：

@inject IJSRuntime JS;

...

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("reinitAngular");
        }
    }
}

这将调用我们的 js 函数，这反过来会导致 Angular 重新初始化自身。它可能需要重新扫描由 Blazor 自己的视图切换更改的 DOM。

在 Blazor Razor 页面中加载 AngularJS page/controller

Load AngularJS page/controller inside a Blazor Razor Page

c#

angularjs

blazor

blazor-client-side

blazor-webassembly