用angular4中的不同路由参数重新加载组件

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

<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中做到这一点？

来源

2017-08-03 CKA

我们有同样的问题:( – vistajess

@vistajess不要告诉我，如果你找到一个解决方案。 – CKA

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

在你的组件，你需要，如果他们改变订阅PARAMS以便检测。

来源

2017-08-03 11:27:34 Justin

我订阅的PARAMS。我的URL也会变为新的PARAMS，但该组件没有重新初始化 – CKA

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

在你的组件类

@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-03 11:36:11

我订阅的参数。我的网址也更改为新的参数。但该组件不会重新初始化。 – CKA

您需要执行基于订阅回调函数中的位置值的初始化逻辑。这样，每当路由发生变化（因此params），初始化逻辑就会重新执行。为了提高效率，如果导航到的路径绑定到相同的组件，那么角度不会销毁和重新创建组件。 –

我试图把订阅回调里面的初始化逻辑。它仍然不起作用。此外，我的初始化逻辑是调用一个http服务，我通过该服务传递位置并获取数据。 – CKA

EDITED

告诉路由器去做到这一点的角度的方法是使用onSameUrlNavigation作为角5.1

但我有不同的方式（Stackblitz）来解决这个问题，通过subscribing到route events，实际上拨打custom reInit method。

诀窍是所有订阅添加到同一个对象，然后取消，只有当ngOnDestroy被称为角，做模板的其余瓦尔从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方法，因为this有角度错误。当销毁组件时，Angular实际上应该自动从router.events中取消订阅，但由于情况并非如此，如果不手动取消订阅，最终会在输入组件时多次调用http请求（例如）。

来源

2018-02-20 23:38:28 FRECIA

用angular4中的不同路由参数重新加载组件

回答

相关问题