2017-10-06 20 views
0

在“ProfileComponent”,这显示当前的轮廓,还有其它配置文件的列表,所以当我尝试通过导航到其他的个人资料...角2导航同一组件的内部

this.router.navigate(['/profile/' + profileID]); 

它在URL变化PARAMS从http://localhost:4200/profile/fsfterthjkj5

http://localhost:4200/profile/hj45k35v

但分量一直显示相同的配置文件。 我可以通过简单地将新配置文件分配给旧配置文件并角度更新页面上的所有数据来重新渲染组件,但是...我如何做到这一点我可以通过单击“返回”回到旧配置文件,浏览器中的按钮。

我尝试重新加载PARAMS后改变页面 - 这种角度也呈现我需要的配置文件,但我仍然无法回去,PARAMS只是改变了网址,并没有影响页面,它没有任何意义上的要求重新加载后相同的数据,而已经加载。

回答

2

当你要浏览到您需要预订的路线参数的可观察到不同的参数相同的组件。

进口:

import { ActivatedRoute } from '@angular/router'; 

构造:

constructor(private route: ActivatedRoute) { } 

的OnInit的生命周期钩:

ngOnInit(): void { 
    this.route.params.subscribe(
     params => { 
      const id = +params['id']; 
      this.getMovie(id); 
     } 
    ); 
} 

每次路线参数改变而不改变部件,内代码订阅方法将执行。

在这个例子中,我从参数中提取id并使用它来获得具有定义id的电影。

像这样的东西应该适合您的情况。

+0

DeborahK谢谢。它实际上工作!!) –

+0

顺便说一句。我通过你在pluralsight教程学习角度..)))所以,非常感谢,以及!!)你太棒了! –

+0

非常感谢! (并且我也有一个Angular Routing课程,如果你对更多的路由细节感兴趣,比如:https://app.pluralsight.com/library/courses/angular-routing) – DeborahK

0

确定解决我猜... 只是实现这个[href]="testFunc(profile.userId)"

testFunc(id){ return '/profile/' + id;} 
+0

这可能不是最好的答案。它基本上“跳过”路由。这可能会给您带来其他问题。当您想要导航到具有不同参数的相同组件时,您需要订阅路由参数的Observable。 – DeborahK