Question

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

我的特殊页面很少

/page/1

代表有关水的页面

/page/2

代表有关火灾的页面。

其他页面是“正常”的，例如

/contact
/about

...

在RouterModule中，我有：

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

因此，PageComponent中分别根据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

那呢：

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);          
}

角度-路由重写网址

2 个答案: