更改检测在降级的 Angular 组件中不起作用

Question

我正在使用@angular/upgrade 模块将一个用AngularJS 编写的相当大的应用程序转换为Angular 应用程序。目前，AngularJS 中的每个组件在 Angular 应用程序中都是运行ning。该应用程序正在像这样引导：

export class AppModule {
    constructor(
        private upgradeModule: UpgradeModule,
    ) {}

    ngDoBootstrap() {
        this.upgradeModule.bootstrap(
            document.body,
            ['myApp'],
            { strictDi: true },
        )
    }
}

但是，我已经开始重写 Angular 中的组件，并且运行在尝试让这些降级的组件正常工作时遇到了问题。我正在使用 ui-router 将组件映射到这样的状态：

function config($stateProvider) {
    $stateProvider.state('some-state', {
        parent: 'app',
        views: {
            content: {
                component: 'someComponent'
            }
        },
        url: '/some-state'
    })
}

重写后的组件降级如下：

angular
   .module('myApp')
   .directive(
       'someComponent',
       downgradeComponent({ component: SomeComponent }),
   )

SomeComponent 只是一个常规的 Angular 组件。

它显示正常，正在渲染模板和所有内容，但是，更改检测似乎不起作用。在渲染视图后不久，更改检测器似乎运行一次，但是在那之后，除非我手动调用它，否则它不会再运行一次。 NgZone.isInAngularZone() returns false 如果运行在降级组件中的任何地方，我不确定这是否有意为之。如果我在任何更改组件字段的方法上注入 ChangeDetectorRef 和运行 detectChanges，更新就会被检测到并呈现得很好。但是，在长运行中将 (input)="changeDetectorRef.detectChanges()" 附加到每个输入，并在几乎任何执行任何操作的函数中调用 detectChanges() 的工作量太大。

有什么我遗漏的吗？如果我没有提供足够的信息，我可以尝试对问题进行最小限度的重现运行ning，不过这可能会有点工作，所以我想先这样问。

Answer 1

好的，原来答案非常简单。当我单独升级所有内容时，我复制了大部分旧的 index.html，它仍然包含 body 标签上的 ng-app="myApp"。

这导致 AngularJS 应用程序在 HTML 中自行 bootstrap 而不是 Angular 应用程序处理 bootstrapping，从而阻止了Angular来自 NgZone 运行的 JS 应用程序。我把这个留给任何犯同样错误的人。 简而言之，请确保您已从 index.html 中删除旧的 ng-app 标签。

更改检测在降级的 Angular 组件中不起作用

Change detection not working in downgraded Angular components

upgrade

angularjs

ng-upgrade

angular2-changedetection

angular