Angular 2在同一组件内导航

Question

在显示当前配置文件的"ProfileComponent"中,有一个其他配置文件的列表,因此当我尝试通过...导航到另一个配置文件时

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

它改变了url中的params http://localhost:4200/profile/fsfterthjkj5

至 http://localhost:4200/profile/hj45k35v

但该组件保持显示相同的配置文件.我可以通过简单地将新配置文件分配给旧配置文件来重新渲染组件,并且角度更新页面上的所有数据但是...我如何这样做我可以通过单击"返回"按钮返回旧配置文件在浏览器中.

我尝试在params更改后重新加载页面 - 这种方式也会渲染我需要的配置文件但仍然无法返回,params只是更改url并且对页面没有任何影响,并且没有任何意义请求相同的数据之后已加载时重新加载.

Answer 1

如果要导航到具有不同参数的同一组件,则需要订阅路径参数的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);
        }
    );
}

每次路由参数更改而不更改组件时,subscribe方法中的代码都将执行.

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

这样的事情应该适用于您的场景.