Question

在＆＃34; ProfileComponent＆＃34;显示当前配置文件，有一个其他配置文件的列表，所以当我尝试通过...导航到其他配置文件时

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

它会更改来自http://localhost:4200/profile/fsfterthjkj5

的网址中的参数

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

但该组件保持显示相同的配置文件。我可以通过简单地将新配置文件分配给旧配置文件来重新渲染组件，并且角度更新页面上的所有数据但是...我该如何做到这一点我可以通过单击＆＃34;回到旧配置文件。背面＆＃34;浏览器中的按钮。

我尝试在更改参数后重新加载页面 - 这种方式角度也会渲染我需要的配置文件但仍然无法返回，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的影片。

这样的事情应该适用于你的场景。

Answer 2

好的，我猜... 刚刚实现了这个var getGlobal = function () { // the only reliable means to get the global object is // `Function('return this')()` // However, this causes CSP violations in Chrome apps. if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); };

[href]="testFunc(profile.userId)"

Angular 2在同一组件内导航

2 个答案: