2

我正在使用 @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()几乎任何可以做任何事情的函数，这将是太多的工作。

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

4

1 回答 1

3

好的，所以答案很简单。当我单独升级所有东西时，我复制了大部分旧的index.html，仍然包含ng-app="myApp"在 body 标签中。

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

于 2018-01-10T11:56:40.300 回答