Angular

Question

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

我有几个特殊页面

/page/1

代表关于水的页面

/page/2

代表关于火灾的页面。

其他页面"normal"喜欢

/contact
/about

...

在 RouterModule 中我有：

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

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

现在我想要用户输入

/water

查看内容（不改变URL！）为

/page/1

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

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

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

/water

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

Answer 1

这个怎么样：

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。

Answer 2

部分基于 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);          
}

Angular - 路由重写 url

Angular - routing rewrite url

url-rewriting

routing

url-redirection