在angular4中重新加载具有不同路由参数的组件

Question

我正在使用 angular2 路由。当用户在搜索字段中重新输入值并点击搜索时，需要重新加载相同的组件，但路由参数不同。

<button (click)="onReload()">Search</button>

onReload() {
this.router.navigate(['results',this.location]);
}

这是我的 ResultsComponent 的路由路径

{ path:'results/:location', component:ResultsComponent}

此函数更改 URL，但不会重新初始化组件。

在angularjs，ui-router我可以这样实现。

$state.go($state.current, location, {reload: true});

如何在 angular4 中做到这一点？

Answer 1

您需要在 route.params 可观察流的订阅回调函数内执行订阅回调函数内的初始化逻辑。

在你的组件类中

@Component({
  ...
})
export class MyComponent implements OnInit {

   myLocation:string;

   constructor(private route:ActivatedRoute) {}

   ngOnInit() {
     this.route.params.subscribe((params:Params) => {
        this.myLocation = params['location'];
        // -- Initialization code -- 
        this.doMyCustomInitialization();
     }
   }

   private doMyCustomInitialization() {
       console.log(`Reinitializing with new location value ${this.location}`);
   }
}

另一方面，如果您需要根据“位置”的值解析数据，您应该使用解析保护，它在创建组件之前解析数据。有关解析保护和路由的更多信息，请参阅https://angular.io/guide/router#resolve-guard。

这是一个有效的 plunkr。 https://plnkr.co/edit/g2tCnJ?p=preview

Answer 2

已编辑

告诉路由器这样做的角度方式是使用onSameUrlNavigation 角度5.1

但我必须以不同的方式（Stackblitz）解决这个问题，通过subscribing 到route events 并实际调用custom reInit method。

诀窍是将所有订阅添加到同一个对象，然后仅当 ngOnDestroy 被 angular 调用时取消订阅，并且模板变量的其余部分从 custom destroy method 更改...

    public subscribers: any = {};

    constructor(private router: Router) {
    /** 
      * This is important: Since this screen can be accessed from two menu options 
      * we need to tell angular to reload the component when this happens.
      * It is important to filter the router events since router will emit many events,
      * therefore calling reInitComponent many times wich we do not want.
      */   
      this.subscribers._router_subscription = this.router.events.filter(evt => evt instanceof NavigationEnd).subscribe((value) => { 
        this.reInitComponent();
      });
    }

    reInitComponent() {
        this.customOnDestroy();
        this.customOnInit();
    }

    customOnInit() {
        // add your subscriptions to subscribers.WHATEVERSUB here
        // put your ngOnInit code here, and remove implementation and import 
    }

    customOnDestroy() {
      // here goes all logic to re initialize || modify the component vars  
    }

    /**
     * onDestroy will be called when router changes component, but not when changin parameters ;)
     * it is importatn to unsubscribe here
     */
     ngOnDestroy() {  
       for (let subscriberKey in this.subscribers) {
          let subscriber = this.subscribers[subscriberKey];
          if (subscriber instanceof Subscription) {
            subscriber.unsubscribe();
          }
        }
     }

请注意，如果您实现 lifecylce hook ngOnInit，则应将其移除并实现示例中的自定义方法。

由于this 角度错误，我添加了unsubscription 方法。 Angular 在销毁组件时实际上应该自动从 router.events 取消订阅，但由于情况并非如此，如果您不手动取消订阅，您最终会调用 http 请求（例如）与您进入组件一样多次。

Answer 3

https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

在您的组件中，您需要订阅参数以检测它们是否已更改。