如何使用 Angular 中的登录用户名创建动态 url 8

Question

我以前从未这样做过，所以这就是为什么我把这个问题放在这里并需要一个解释或一个示例博客来准确地告诉我如何创建一个像这样的动态 url demo.com/username.目前我的路线是这样工作的 demo.com/settings/emailsettings 但我需要实现它变成 demo.com/username/settings/emailsettings 的逻辑。

注：以上url仅供参考，并非真实

Answer 1

请尝试以下代码：

let url='demo.com/settings/emailsettings';
let pos=url.indexOf('/')+1;
let userName='myUserName/';
let outputUrl=[this.url.slice(0,pos),userName,this.url.slice(pos)].join('');

Answer 2

在你的路由中你需要定义一个参数

{
  path: '/:username/settings/emailsettings',
  component: YourComponent
}

然后，当通过代码导航时，您将动态地将用户名传递给路由。

来自组件 class:

this.navigate([user.username, 'settings', 'emailsettings'];

来自组件模板

[routerLink]="[user.username, 'settings', 'emailsettings']"

如何使用 Angular 中的登录用户名创建动态 url 8

How to create dynamic url with logged in username in Angular 8

angular

typescript

dynamic-url