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，其中仍然在正文标记上包含ng-app="myApp"。

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

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

1 个答案: