1

我有一个混合 angular-cli，大致遵循 Victor Savkin 的Lazy Loaded AngularJS guide。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和

4

2 回答 2

5

另一种方法是让 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);
  }
}

于 2018-05-30T15:47:25.110 回答
1

此设置将不起作用。AngularJS 需要能够加载到应用程序的根目录中才能正确定义范围。

解决此问题的更好方法是<div ui-view>在应用程序的根目录中使用该指令（如升级指南中所述），然后将布局组件从 Angular 降级为 AngularJS 以包装您的内容。

于 2017-09-01T22:43:57.630 回答