Question

我用Angular 5.x SPA替换现有的AngularJS 1.6.x SPA，我想让我的用户更改透明。

我担心对现有应用有书签的用户，因为它在网址中有哈希值（例如：example.com/#/menu和example.com/#/item/37）;

但是，新应用在网址中没有哈希值（例如：example.com/menu和example.com/item/37）。

路径和路由都是相同的，但当前应用中的#/除外。

有没有办法可以配置Angular路由以删除#/并使用新应用的无哈希路由配置？

我可以复制我的所有路由以适应包含和不包含哈希的路径，但必须有一种方法不需要加倍我的代码。

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    component: MenuComponent
  },
  // etc.
];

同样，重定向每个#/路径也会使代码加倍。

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    redirectTo: 'menu'
  },
  // etc.
];

我希望这些方面有一些东西：

{
  path: '#/*',
  redirectTo: '*' // Somehow reference the wildcard part of the path here 
}

提前感谢您的协助。

Answer 1

@Yanis 发布的答案几乎有效，但需要稍微调整一下。他的回答绝对值得赞成;但是，下面是我实施的工作解决方案：

export class AppComponent implements OnInit {
    constructor (private router: Router) { }

    ngOnInit() {
      this.router.events.subscribe(event => {
        if (event instanceof NavigationStart) {
          if (!!event.url && event.url.match(/^\/#/)) {
            this.router.navigate([event.url.replace('/#', '')]);
          }
        }
      });
    }
}

Answer 2

我不知道这是否正确。但你可以做这样的事情：目标是订阅NavigationChange，然后检查你当前的路线是否以'＃！'开头，如果是，你重定向到正确的路线。

class AppComponent implement OnInit {
    constructor(router: Router) {
        //When url change, we check if actual url have #! on it, then we redirect to the route without it.
        router.events.subscribe((event: NavigationEvent): void => {
            this.url = router.url;
            if (this.url.match('/^#!/')) {          
              this.router.navigate(
                this.url.replace('#!','')
              );
            }
          }
        );

    }
}

我认为另一个更复杂的问题是使用自定义“匹配器”。更多信息：

https://github.com/angular/angular/issues/12442

使用散列将所有URL重定向到Angular Routes而不使用散列

2 个答案: