Angular 2 在同一组件内部导航

Question

在显示当前个人资料的 "ProfileComponent" 中，有一个其他个人资料的列表，因此当我尝试通过...导航到其他个人资料时...

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

它将 url 中的参数从 http://localhost:4200/profile/fsfterthjkj5

更改为

到http://localhost:4200/profile/hj45k35v

但组件一直显示相同的配置文件。我可以通过简单地将新配置文件分配给旧配置文件并 angular 更新页面上的所有数据来重新呈现组件但是...我该怎么做才能通过单击返回旧配置文件"back" 浏览器中的按钮。

我尝试在更改参数后重新加载页面 - 这样 angular 也会呈现我需要的配置文件，但我仍然无法返回，参数只是在 url 中更改并且对页面，并且在已经加载的情况下重新加载后请求相同的数据是没有意义的。

Answer 1

好的我想解决了... 刚刚实现了这个 [href]="testFunc(profile.userId)"

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

Answer 2

当您想使用不同的参数导航到同一组件时，您需要订阅路由参数的 Observable。

进口：

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 的电影。

类似这样的内容应该适用于您的场景。

Angular 2 在同一组件内部导航

Angular 2 Navigate inside of the same component

angular2-routing

angular