我的团队有一个大小不错的AngularJS应用，我们想使用Blazor webassembly对其进行现代化改造，我认为如果加载了所有相关的javascript库，那么加载AngularJS控制器和页面应该没有问题。
我已经成功地以我"认为"的方式整合了所有内容。将工作，与
<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是加载的，但没有附加到"real"DOM，它没有得到事件，让它知道一个新的页面已经加载。
请注意，我们没有使用angularjs的路由器，但是angularjs应该可以很好地从ng-controller标签动态加载控制器。
谁有什么主意，我可以试试吗?试试这样:
添加到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页面/组件添加:
@inject IJSRuntime JS;
...
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("reinitAngular");
}
}
}
这将调用我们的js函数，这反过来会导致Angular重新初始化自己。它可能需要重新扫描DOM，这是由Blazor自己的视图切换所改变的。