angular – 手动更改路由参数会导致用户界面不一致

这是一个可以玩的玩家：

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

一切都运行良好,除非您手动更改网址栏中的id参数,因为项目下拉列表不会将新projectId显示为当前项目.当用户将网址保存为收藏链接并将其复制/粘贴到网址栏时,会发生这种情况！我会说一个常见的情况！

为了解决这个问题,我可以在TestsListComponent中监听route.params更改,并在该下拉列表中添加一个带有sharedService / EventEmitter的检查. TestsListComponent中的bool返回值existsProjectId决定我应该重定向到/ projects页面,因为id不存在.

但老实说,至少从用户体验的角度来看,从TestsListComponent重定向太晚了,因为路由项目/：id / tests已经被激活.

你会如何解决这种不端行为？

附：

>也许有一种全局参数更改我可以听,并检查ProjectsListComponent中的路径及其ID,这将有所帮助！
>如果有人知道如何在窗口模式下编辑plunkr的url栏以测试该不一致,请告诉我你是如何使该readonly url栏可编辑的…甚至将url复制到新选项卡也不起作用,因为我得到未找到plunkr错误… =>
回答

>加载plunkr并激活窗口模式
>在窗口模式下,将URL复制/粘贴到新选项卡中
>当这是粘贴的URL：https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
>使它成为网址：
https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
>并更改参数：
https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
>如果你不添加哈希,那么你得到一个未找到的404.

解决方法

我不确定我是否正确理解你的问题,无论如何这里是我的 plunkr.

this.router.events.subscribe(event => {

        if (event instanceof RoutesRecognized)
        {
          var first=event.state.root.firstChild.firstChild;
          var id = first && event.state.root.firstChild.firstChild.params['id'];
          console.debug('recognized',id);
          this.currentProject = this.projects[+id-1];

          console.log(this.currentProject);
        } 
  });

只需导航到#/ projects / 1 / tests.