Как создать динамический URL с зарегистрированным именем пользователя в Angular 8

Question

Я никогда не делал этого раньше, поэтому я поставил этот вопрос здесь и мне нужно объяснение или пример блога, который может точно сказать мне, как я могу создать динамический URL, подобный этому demo.com/username. В настоящее время мои маршруты работают следующим образом demo.com/settings/emailsettings, но мне нужно реализовать логику, что он становится demo.com/username/settings/emailsettings.

Примечание. Приведенные выше URL приведены только для примера и не являются реальными.

Answer 1

в ваших маршрутах вам нужно определить параметр

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

Затем при навигации по коду вы будете динамически передавать имя пользователя на маршрут.

Из класса компонента:

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

Из шаблона компонента

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

Answer 2

Пожалуйста, попробуйте ниже код:

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('');