Angular - 路由重写网址

Question

我有一个看起来很简单的问题，但是我已经搜索了很多解决方案但找不到它，尤其是自从 Angular2 以来很多事情都发生了变化。

我有几个特殊页面

/page/1

代表关于水的页面

/page/2

代表关于火的页面。

其他页面都是“正常”之类的

/contact
/about

...

在 RouterModule 我有：

RouterModule.forRoot([      
  {
      path: 'page/:id',
      component: PageComponent     
  },
  {
      path: 'contact',
      component: ContactComponent     
  },

因此，PageComponent 中的 Water 和 Fire 内容分别根据 id 1 或 2 生成。 （我还有其他动态数据，不只是水和火）

现在我想当用户进入时

/water

查看内容（不更改 URL！）到

/page/1

所以我有一个重定向，缺乏更好的解决方案：

{ path: 'water', redirectTo: 'page/1', pathMatch: 'full' },
{ path: 'fire', redirectTo: 'page/2', pathMatch: 'full' } ...

但这会导致 URL 发生变化。但我想要的是当用户进入时

/water

我希望 URL 保持不变，而不是重定向！ （同样适用于 /fire 和其他动态内容页面。）

Answer 1

部分基于 mbojko 的回答（因为按照 arieljuod 的建议检查可观察数据的 id 对我来说太多了），我提出了以下解决方案：

RouterModule.forRoot([      
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent
  },
  {
    path: 'fire',
    component: PageComponent
  }

然后在PageComponent中：

import { Location } from '@angular/common';

...

constructor(
        private location: Location,

...

private mapPathToId(path: string): number {
    switch (path) {
        case '/water':
            return 1;
        case '/fire':
            return 2;
        ...
    }        
}

ngOnInit(): void {
    const id = this.mapPathToId(this.location.path());
    this.showContent(id);          
}

Answer 2

这个呢：

RouterModule.forRoot([      
  {
    path: 'page/:id',
    component: PageComponent     
  },
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent,
    data: {id: 1}
  },
  {
    path: 'fire',
    component: PageComponent,
    data: {id: 2}
  }

https://angular.io/guide/router

您必须稍微修改一下您的 PageComponent 以检查可观察数据上是否有 id 或者该 id 是否来自 url。