Ui路由器解析变量在组件构造函数中仍未定义答案

【问题标题】：Ui router resolve variable remain undefined in component constructorUi路由器解析变量在组件构造函数中仍未定义
【发布时间】：2017-11-24 11:01:21
【问题描述】：

我有这个 UI 路由器状态并附加了一个组件：

export const exchangeState = {
    name: 'exchange',
    url: '/exchange',
    component: ExchangeMainComponent,
    resolve: [
        {
            token: 'fromResolve',
            resolveFn: () => {
                return 'string from resolve';
            }
        }
    ]
};

在组件的构造函数中，我尝试访问fromResolve，但它返回未定义。这是组件：

@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() {
    }
}

fromResolve 在视图中正确显示。

如何在构造函数中获取它的值？

【问题讨论】：

标签： angular angular-ui-router

【解决方案1】：

@Input 值首先在OnChanges 生命周期挂钩中可用。执行顺序是……

constructor -> OnChanges -> OnInit ....

因此您可以在OnChanges 或OnInit 中访问它，但不能在构造函数中访问它。

【讨论】：

【解决方案2】：

如果你使用 Angular RouterModule，你应该这样做

fromResolve: string;
constructor(private router: ActivatedRouter) {
 this.route.data
  .subscribe((data: { fromResolve: string}) => {
    this.fromResolve= data.fromResolve;
  });
}

您应该按照此处描述的方式修改您的路由器：

Fetch data before navigating

【讨论】：

这似乎只适用于 RouterModule 但不适用于 UIRouterModule
是的，你说得对，但为什么你不使用 Angular RouterModule 呢？
现在我只是在看看 UIrouter 是如何工作的
好的，我明白了。我写的是 Angular RouterModule