8

我正在使用 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中做到这一点？

4

3 回答 3

4

您需要在 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

于 2017-08-03T11:36:11.710 回答
3

已编辑

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

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

诀窍是将所有订阅添加到同一个对象，然后仅在 AngularngOnDestroy调用时取消订阅，然后将模板变量的其余部分从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，您应该删除它并像示例中那样实现自定义方法。

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

于 2018-02-20T23:38:28.163 回答
2

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

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

于 2017-08-03T11:27:34.933 回答