Question

我有一个组件：

将路由器插座加载到视图中
在其构造函数中：订阅已初始化的ngrx商店
在其构造函数中：根据可验证的情况，转向相关的子路径/子组件。

ReRoutingComponent.ts

export class ReRoutingComponent implements OnInit {
HOF$:Observable<any>;
HOF:any;

isUHC:boolean;
constructor(
    private _store:Store<any>,
    private _router:Router,
    private _route:ActivatedRoute
) {
    this.HOF$ = _store.select(from_costumer.getHOF);
    this.HOF$.subscribe((v:any)=> {
        this.HOF = v;
        this.isUHC = this.HOF['isUHC'];
        if(this.isUHC) {
            this._router.navigate(['../uscostumer'], {relativeTo: this._route});
        }else {
            this._router.navigate(['../globalcostumer'], {relativeTo: this._route});
        }
    });
}
ngOnInit() {

}
}

默认情况下路径 domain.com/site/providers 会重新路由到 domain.com/site/providers/globalcostumer 并 domain.com如果已分配ngrx变量，则/ site / providers / uscostumer 。

我使用简单的 [router-link] 指令导航到 domain.com/site/providers ，而不是通过 _router.navigate 。

问题

当我使用相同的路由器插座链接导航回 ReRoutingComponent.ts 或 domain.com/site/providers 时，< strong> ReRoutingComponent.ts 构造函数未运行，组件未重新加载且ngrx订阅不会重新路由到相关组件。

Answer 1

您可以使用ngOnInit生命周期钩子来执行这些操作，并且每次路由时都会调用它。

export class ReRoutingComponent implements OnInit {
HOF$:Observable<any>;
HOF:any;
subscription;
isUHC:boolean;
constructor(
    private _store:Store<any>,
    private _router:Router,
    private _route:ActivatedRoute
) {}

ngOnInit() {
   this.HOF$ = _store.select(from_costumer.getHOF);
   this.subscription = this.HOF$.subscribe((v:any)=> {
        this.HOF = v;
        this.isUHC = this.HOF['isUHC'];
        if(this.isUHC) {
            this._router.navigate(['../uscostumer'], {relativeTo: this._route});
        }else {
            this._router.navigate(['../globalcostumer'], {relativeTo: this._route});
        }
    });        
}

ngOnDestroy() {
   this.subscription.unsubscribe();
}

}

角度4重新路由组件不重新加载

1 个答案: