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

Question

这里有一个 plunker 可以玩:

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

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

为了解决这个问题，我可以在 TestsListComponent 中监听 route.params 的变化。并添加带有 sharedService/EventEmitter 的支票该下拉列表中是否存在更改的 ID。 TestsListComponent 中的 bool 返回值 existsProjectId 决定我是否应该重定向到 /projects页面，因为该 ID 不存在。

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

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

附言

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

• 如果有人知道如何在窗口模式下编辑 plunkr 的 url 栏以测试这种不一致，请告诉我您是如何使只读 url 栏可编辑的...即使将 url 复制到新选项卡中也不会工作，因为我得到一个 plunkr not found 错误...=>回答

  1. 加载 plunkr 并激活窗口模式
  2. 在窗口模式下将 url 复制/粘贴到新选项卡
  3. 当那是粘贴的 url: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);