如何在 Angular 路由器中对部分路径使用通配符？

Question

我有以下路由设置。

const routes: Routes = [
  { path: "submenu1", component: SubmenuComponent, outlet: "menus" },
  { path: "submenu2", component: SubmenuComponent, outlet: "menus" },
  { path: "submenu3", component: SubmenuComponent, outlet: "menus" },
  ...
];

我尝试使用通配符 ** 来匹配 starting 与 submenu 的所有内容，如下所示。可悲的是，我似乎无法以这种方式匹配任何东西并且根本没有路由。

const routes: Routes = [
  { path: "submenu**", component: SubmenuComponent, outlet: "menus" },
  //{ path: "submenu1", component: SubmenuComponent, outlet: "menus" },
  //{ path: "submenu2", component: SubmenuComponent, outlet: "menus" },
  //{ path: "submenu3", component: SubmenuComponent, outlet: "menus" },
  ...
];

我该怎么做？

Answer 1

下面的怎么样？

const routes: Routes = [
  { path: "submenu1", component: SubmenuComponent, outlet: "menus" },
  { path: "submenu2", redirectTo: 'submenu'},
  { path: "submenu3", redirectTo: 'submenu'},
];

或者如果您不介意在应用程序组件上放置路由器侦听器：

ngOnInit() {

        if (isPlatformBrowser) {
            this.routerSubscription = this.router.events
                .filter(event => event instanceof NavigationEnd)
                .subscribe(() => {
                    if(this.router.url.startsWith('submenu'){
                        this.router.navigate(['submenu1']);
                    };
                });
        }
    }

    ngOnDestroy() {
        this.routerSubscription.unsubscribe();
    }

Answer 2

考虑制作 1、2、3 参数而不是路由字符串的一部分：submenu/1、submenu/2 等等。这样你的路由配置就可以是

{ path: "submenu/:id", component: SubmenuComponent, outlet: "menus" },

这是我的一个例子：

    RouterModule.forChild([
        {
            path: 'messages/:id',
            component: MessageComponent,
            outlet: 'popup'
        }
    ])

然后我这样导航到它：

this.router.navigate([{outlets: { popup: ['messages', 7]}}]);

但是 routerLink 也可以。

结果是：http://localhost:3000/welcome(popup:messages/7)在浏览器地址栏中。

如何在 Angular 路由器中对部分路径使用通配符？

How to use a wild card for part of the path in Angular router?

angular-routing

angular