Ui 路由器解析变量在组件构造函数中保持未定义

Question

我有这个 UI 路由器状态，上面有一个组件：

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

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

@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 正确显示在视图中。

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

Answer 1

如果您正在使用 Angular RouterModule，您应该这样做

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

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

Fetch data before navigating

Answer 2

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

constructor -> OnChanges -> OnInit ....

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

Ui 路由器解析变量在组件构造函数中保持未定义

Ui router resolve variable remain undefined in component constructor

angular

angular-ui-router