[英]AngularJS migration to Angular - how to migrate internal states
I have an AngularJS login component that I need to migrate.我有一个需要迁移的 AngularJS 登录组件。 I have to use AngularJS router, as not all the application haa been migrated.我必须使用 AngularJS 路由器,因为并非所有应用程序都已迁移。
The login component contains a ui-view directive in the template.登录组件在模板中包含一个ui-view指令。 eg:例如:
<div>
...
</div>
<div>
..
<div ui-view></div>
..
</div>
....
States are similar to below (there are a few more):状态类似于以下(还有一些):
.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',
}
})
How can I convert this component without needing to finish the entire migration?如何在不需要完成整个迁移的情况下转换此组件?
Found the solution myself.自己找到了解决办法。 The following can be done:可以执行以下操作:
create an angular js directive:创建一个有角度的 js 指令:
import * as angular from 'angular';
class RouterOutletWrapper {}
let routerOutletWrapper = {
controller: RouterOutletWrapper,
template: `<ui-view></ui-view>`
};
angular
.module('app')
.component('routerOutletWrapper', routerOutletWrapper);
and a matching Angular directive:和匹配的 Angular 指令:
@Directive({
selector: 'router-outlet-wrapper'
})
export class UpgradedAjsRouterOutletWrapper extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('routerOutletWrapper', elementRef, injector);
}
}
Then in then login component html write:然后在然后登录组件 html 中写入:
...
<router-outlet-wrapper></router-outlet-wrapper>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.