angular 4 重新路由组件不重新加载

Question

我有一个组件：

加载 router-outlet 进入视图
在其构造函数中：订阅已初始化的 ngrx Store veriable
在其构造函数中：导航到基于该验证的相关 sub-path/child-component。

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/site/providers/uscostumer 如果分配了 ngrx 变量。

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

问题

当我导航回 ReRoutingComponent.ts 或 domain.com/site/providers 使用相同的 router-outlet link，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();
}

}

angular 4 重新路由组件不重新加载

angular 4 rerouting-component does not reload

angular

angular5

ngrx-store