AngularJS 迁移到 Angular - 如何迁移内部状态

Question

我有一个 AngularJS 登录组件需要迁移。我必须使用 AngularJS 路由器，因为并非所有应用程序都已迁移。

登录组件在模板中包含一个 ui-view 指令。例如：

<div>
...
</div>
<div>
..
    <div ui-view></div>    
..
</div>
....

状态类似于以下（还有一些）：

  .state('loginroot', {
      abstract: true,
      url: "",
      template: '<login-root></login-root>',
      data: {
          allRole: true
     }
 })

  .state('loginroot.forgot', {
      url: "/forgot",
      template: `<forgot-password></forgot-password>`,

      data: {
          pageTitle: 'Forgot my password',

      }
  })

如何在不需要完成整个迁移的情况下转换此组件？

Answer 1

我自己找到了解决方案。可以做到以下几点：

创建一个 angular js 指令：

import * as angular from 'angular';

class RouterOutletWrapper {}


let routerOutletWrapper = {
    controller: RouterOutletWrapper,
    template: `<ui-view></ui-view>`
};

angular
.module('app')
.component('routerOutletWrapper', routerOutletWrapper);

和匹配的 Angular 指令：

@Directive({
    selector: 'router-outlet-wrapper'
})
export class UpgradedAjsRouterOutletWrapper extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super('routerOutletWrapper', elementRef, injector);
    }
}

然后在then登录组件html写：

...
<router-outlet-wrapper></router-outlet-wrapper>
...

AngularJS 迁移到 Angular - 如何迁移内部状态

AngularJS migration to Angular - how to migrate internal states

angularjs

angular-ui-router

angular-router