Angular 6中如何创建{用户名}-profile格式的动态URL？

嘿，这个问题我之前也碰到过，Angular的路由系统完全支持这种自定义的URL格式，不用依赖外部配置（比如PHP的.htaccess），直接在路由配置里就能搞定，给你两种实用方案参考：

方案一：带正则约束的路由路径（简单直接） #

Angular允许在路由参数后面添加正则表达式，来约束参数的匹配规则，正好可以用来实现你要的username-profile格式：

1. 配置路由
   在你的路由模块（比如app-routing.module.ts）里，把原来的profile/:value替换成下面的配置：

import { Routes, RouterModule } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  // 其他路由...
  {
    // 用正则约束username参数匹配非-的字符，后面固定跟上-profile
    path: ':username([^-]+)-profile',
    component: ProfileComponent
  }
];

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

2. 在组件中获取用户名参数
   和之前获取动态参数的方式一样，通过ActivatedRoute来获取username参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  username: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.username = params.get('username');
      // 这里就可以用username加载用户专属数据了
    });
  }
}

3. 生成对应的URL链接
   在模板或组件里生成用户专属链接时，直接拼接用户名和-profile即可：

• 模板中用routerLink：

<a [routerLink]="['/', user.username + '-profile']">查看{{user.username}}的个人主页</a>

• 组件中用Router.navigate：

import { Router } from '@angular/router';

constructor(private router: Router) { }

goToUserProfile(username: string): void {
  this.router.navigate([`/${username}-profile`]);
}

方案二：自定义路由匹配器（更灵活） #

如果你的URL规则更复杂，可以用Angular的自定义路由匹配器来实现，这种方式自由度更高：

1. 配置带匹配器的路由

import { Routes, RouterModule, UrlSegment, UrlMatchResult } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';

// 自定义匹配器函数
function profileMatcher(url: UrlSegment[]): UrlMatchResult | null {
  // 只匹配单段URL（比如/user1-profile/）
  if (url.length === 1) {
    const path = url[0].path;
    // 用正则匹配`xxx-profile`格式的路径
    const match = path.match(/^([^-]+)-profile$/);
    if (match) {
      return {
        consumed: url,
        // 提取出用户名作为参数
        posParams: {
          username: new UrlSegment(match[1], {})
        }
      };
    }
  }
  // 不匹配则返回null
  return null;
}

const routes: Routes = [
  // 其他路由...
  {
    matcher: profileMatcher,
    component: ProfileComponent
  }
];

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

2. 获取参数和生成链接
   这部分和方案一完全一致，不需要额外修改，同样通过ActivatedRoute获取username，生成链接的方式也相同。

两种方案都能实现你要的URL格式，方案一适合简单规则，方案二更适合复杂的自定义匹配场景，根据你的需求选就行~

内容的提问来源于stack exchange，提问作者Jon