Angular Ui路由器解析变量在组件构造函数中未定义
我有一个附加组件的UI路由器状态:Angular Ui路由器解析变量在组件构造函数中未定义,angular,angular-ui-router,Angular,Angular Ui Router,我有一个附加组件的UI路由器状态: export const exchangeState = { name: 'exchange', url: '/exchange', component: ExchangeMainComponent, resolve: [ { token: 'fromResolve', resolveFn: () => { return 'st
export const exchangeState = {
name: 'exchange',
url: '/exchange',
component: ExchangeMainComponent,
resolve: [
{
token: 'fromResolve',
resolveFn: () => {
return 'string from resolve';
}
}
]
};
在组件的构造函数中,我试图从Resolve访问,但它返回undefined。这是一个组件:
@Component({
selector: 'app-exchange-main',
templateUrl: './exchange-main.component.html',
styleUrls: ['./exchange-main.component.css']
})
export class ExchangeMainComponent implements OnInit {
@Input('fromResolve') fromResolve: string;
constructor() {
console.log(this.fromResolve); // <- undefined
}
ngOnInit() {
}
}
@组件({
选择器:'应用程序交换主',
templateUrl:'./exchange main.component.html',
样式URL:['./exchange main.component.css']
})
导出类ExchangeMainComponent实现OnInit{
@输入('fromResolve')fromResolve:string;
构造函数(){
console.log(this.fromResolve);//如果您使用的是Angular RouterModule,您应该这样做
fromResolve: string;
constructor(private router: ActivatedRouter) {
this.route.data
.subscribe((data: { fromResolve: string}) => {
this.fromResolve= data.fromResolve;
});
}
您应该按照如下所述的方式修改路由器:
@Input
值首先在OnChanges
生命周期挂钩中可用。执行顺序为
constructor -> OnChanges -> OnInit ....
因此,您可以在OnChanges
或OnInit
中访问它,但不能在构造函数中访问。这似乎只适用于RouterModule,但不适用于UIRouterModule是的,您是对的,但为什么不使用Angular RouterModule?现在我只是在检查UIrouter是如何工作的,我明白了。我写的是为Angul编写的ar路由模块