Блог

У меня есть компонент входа в AngularJS, который мне нужно перенести. Я должен использовать маршрутизатор AngularJS, так как не все приложения были перенесены.

Компонент входа в систему содержит директиву пользовательского интерфейса в шаблоне. например:

 <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',

      }
  })
  

Как я могу преобразовать этот компонент без необходимости завершения всей миграции?

Нашел решение сам. Можно выполнить следующее:

создайте директиву 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);
    }
}
  

Затем в html компонента входа в систему напишите:

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