问题

"Quick Question: Is it possible to route something like domain.com/@Username? The @ is not part of the username itself.

I already tried { path: "@:username", component: UserComponent } but this doesn't seem to work.

{ path: "@/:username", component: UserComponent } would work but looks pretty 💩"

答案1

得分: 1

你可以在URL中将“@”符号编码为“%40”。因此，要实现所需的路由模式，例如domain.com/@Username，您可以使用以下路由配置：

{ path: "%40:username", component: UserComponent }

编辑：

确保在您的路由模块中正确定义了路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';

const routes: Routes = [
  { path: '%40:username', component: UserComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

确保您在模板文件中使用了正确的路由出口（router outlet）。例如，如果您想要在主要的路由出口中渲染UserComponent，您的模板应该包含一个router-outlet元素。

双重检查您是否以正确的URL格式导航。例如，如果您在模板中使用routerLink导航到用户组件，请确保它被正确编码：

<a [routerLink]="['%40', 'Username']">前往用户</a>

{ path: "%40:username", component: UserComponent }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';

const routes: Routes = [
  { path: '%40:username', component: UserComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<a [routerLink]="['%40', 'Username']">Go to User</a>

答案2

得分: 0

我刚在 angular文档中找到了关于使用url匹配器进行路由 的答案。

const routes: Routes = [
    {
        matcher: (url) => {
            if (url.length === 1 && url[0].path.match(/^@.+$/gm)) {
                return {
                    consumed: url,
                    posParams: {
                        username: new UrlSegment(url[0].path.slice(1), {}),
                    },
                };
            }

            return null;
        },
        component: UserComponent,
    },
];

<details>
<summary>英文:</summary>

I just found an answer in the angular docs for [routing with url matcher][1].

	const routes: Routes = [
		{
			matcher: (url) =&gt; {
			  if (url.length === 1 &amp;&amp; url[0].path.match(/^@.+$/gm)) {	
				return {
				  consumed: url
				  posParams: {
					username: new UrlSegment(url[0].path.slice(1), {}),
				  },
				};
			  }

			  return null;
			},
			component: UserComponent,
		},
    ];


  [1]: https://angular.io/guide/routing-with-urlmatcher#configure-your-routes-for-your-application

</details>