更改检测不适用于降级的Angular组件

Question

我正在使用@ angular / upgrade模块将使用AngularJS编写的相当大的应用程序转换为Angular应用程序。目前，AngularJS中的每个组件都在Angular应用程序中按预期运行。该应用程序正在被引导如下：

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()如果在降级组件内的任何地方运行，则返回false，我不确定这是否有意。如果我注入ChangeDetectorRef并在任何更改组件字段的方法上运行detectChanges，则会检测到更新并正常呈现。然而，从长远来看，将(input)="changeDetectorRef.detectChanges()"附加到每个输入都是太多的工作，并且几乎可以在任何函数中调用detectChanges()。

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

Answer 1

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

这导致AngularJS应用程序在HTML中引导自身，而不是处理引导的Angular应用程序，这阻止了AngularJS应用程序在NgZone中运行。对于那些犯同样错误的人，我会把它留在这里。简而言之，请确保您已从index.html中删除旧的ng-app-tag。