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

Question

这是一个可以玩的笨蛋：

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

一切正常，除非您手动更改 url bar 中的 id 参数，因为项目下拉菜单不会将新的 projectId 显示为当前项目。当用户将 url 保存为收藏链接并将其复制/粘贴到 url 栏中时，就会发生这种情况！我会说一个常见的情况！

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

但老实说，TestsListComponent至少从用户体验的角度来看，从 重定向为时已晚，因为route projects/:id/tests已经激活。

你将如何纠正这种不当行为？

附言

• 也许有一种全局参数更改我可以收听并检查 ProjectsListComponent 中的路径及其 ID，这会有所帮助！

• 如果有人知道如何在窗口模式下编辑 plunkr 的 url 栏以测试不一致，请告诉我你是如何使只读 url 栏可编辑的......即使将 url 复制到新选项卡中也不起作用，因为我得到了plunkr 未找到错误... => ANSWER

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

Answer 1

如下更新您的 app.routes.ts 文件并使用 HashLocationStrategy，以供参考：HashLocationStrategy

import {Routes, RouterModule} from '@angular/router';
import ProjectListComponent from './projects-list.component';
import TestsListComponent from './tests-list.component';
import OverviewComponent from './overview.component';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';


export const routes: Routes = [
    { path: '', redirectTo: 'projects', pathMatch: 'full' },
    {
        path: 'projects', component: ProjectListComponent,
        children: [
            { path: ':id', redirectTo: ':id', pathMatch: 'full' },
            {
                path: ':id', component: OverviewComponent,
                children: [
                    { path: '', redirectTo: 'tests', pathMatch: 'full' },
                    { path: 'tests', component: TestsListComponent },

                ]
        ]
    }
];

export const appRoutingProviders: any[] = [
    {
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }
];

export const routing = RouterModule.forRoot(routes);

Answer 2

我不确定我是否正确理解了您的问题，无论如何这是我的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。

Answer 3

没有可以订阅的全局参数更改。

一种方法是从根路由器开始定位路由及其参数：

console.log('router', this.router.routerState.root.firstChild.firstChild && this.router.routerState.root.firstChild.firstChild.snapshot.params);

这可以this.router.events.subscribe((val) => {在路由器保护内部或内部canActivate完成，例如resolve https://angular.io/docs/ts/latest/guide/router.html#!#guards