Question

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

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

在组件的构造函数中，我尝试访问fromResolve但它返回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() {
    }
}

fromResolve在视图中正确显示。

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

Answer 1

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

constructor -> OnChanges -> OnInit ....

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

Answer 2

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

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

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

Fetch data before navigating

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

2 个答案: