Angular UpgradeComponent 找不到 $scope

Question

我有一个混合 Angular-cli，它大致遵循 Victor Savkin 的延迟加载 AngularJS 指南。AngularJS 在 LazyLoaded Angular 模块的构造函数中进行引导。我的应用程序和指南之间的主要区别是我试图将<ui-view>指令包装在一些 Angular 组件中。由于我的布局结构，<ui-view>当 AngularJS 启动时，该元素将不可用，并且可以随时添加或删除。

import { Component, Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import * as angular from 'angular';

@Component({
  template: `
  <layout-wrapper>
    <my-toolbar></my-toolbar>
    <layout-contents>
      <ng2-ui-view>
        <h3 class="text-center">AngularJS page not loaded</h3>
      </ng2-ui-view>
    </layout-contents>
  </layout-wrapper>
  `,
})
export class LegacyOutputComponent { }

@Directive({selector: 'ng2-ui-view'})
export class UpgradedUiViewComponent extends UpgradeComponent {
  constructor(ref: ElementRef, inj: Injector) {
    super('uiViewWrapper', ref, inj);
  }
}

export const routerPatchModule = 'arcs.router.patch';

// We need to define a wrapper for ui-view because we can only upgrade
// components with only one definition. uiView cannot be automatically
// upgraded because its definition is too complex
angular.module(routerPatchModule, ['ui.router'])
.component('uiViewWrapper', { template: '<ui-view></ui-view>'})

当我运行代码时，Error: No provider for $scope!会抛出错误。检查堆栈跟踪，我可以看到它被抛出到UpgradeComponent超类中。注射器试图获取$scope并

Answer 1

另一种方法是让 Angular 知道它需要提供$scope.

import { Injector } from '@angular/core';

// allow $scope to be provided to ng1
export const ScopeProvider = {
  deps: ['$injector'],
  provide: '$scope',
  useFactory: (injector: Injector) => injector.get('$rootScope').$new(),
};

@Directive({
  providers: [ ScopeProvider ],
  selector: 'ng2-ui-view',
})
export class UpgradedUiViewComponent extends UpgradeComponent {
  constructor(ref: ElementRef, inj: Injector) {
    super('uiViewWrapper', ref, inj);
  }
}