Angular - Получить текущий активированный маршрут и повторно перейти на ту же страницу с другим параметром маршрута.

Question

Я пытаюсь получить текущий маршрут и перейти к тому же маршруту после изменения itemCode в текстовом поле поиска в заголовке.Когда я изначально пришел на страницу, родительский маршрут - «iauth / iauthedit / 1706», затем пользователь переходит на дочерний маршрут «/ info», есть несколько других маршрутов, по которым пользователь может перемещаться со стороны панели навигации, которая не показана на рисунке ниже.,Когда я изменяю код элемента на 1853 в заголовке приложения, как показано на рисунке, URL-адрес должен измениться на «iauth / iauthedit / 1853 / info», как я могу динамически изменять параметр маршрута URL-адреса браузера на основе текущего URL-адреса маршрута набраузер?, я пытаюсь найти текущий активированный маршрут, который в текущем сценарии родительский "iauth / iauthedit /" из URL браузера, так что я могу сделать навигацию

this.router.navigate(['iauth/iauthedit/', 1853];

Ниже указаны текущие маршруты:

const itemAuthRoutes: Routes = [
    {
        path: 'iauthedit/:itemCode',
        children: [
            {
                path: '',
                canActivate: [AuthGuard],
                //data: { feature: AppFeature.AuthorizedItem },
                component: ItemAuthorizationEditComponent,
                children: [
                    {
                        path: 'info', component: ItemAuthorizationInfoEditComponent
                    }]
            }]
    }]

Answer 1

Вы можете попробовать просмотреть свойство routeConfig path

constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

navigate(newId: string) {
  let route = this.activatedRoute.snapshot;
  const parts = [];
  while (route) {
    route.routeConfig && route.routeConfig.path && parts.push(route.routeConfig.path);
    route = route.parent;
  }
  // `parts` now contain your route's pieces - do whatever you deem fit with that
  parts[1] = newId; // i.e. replace the part that needs replacing
  this.router.navigate(parts.reverse());
}

Надеюсь, это немного поможет: -)

Answer 2

В моем случае мне потребовался путь маршрутизации, т.е. / iauth / iauthedit /: itemCode.Таким образом, чтобы получить это, я использовал ActivatedRoute и Router, которые я вставил в мой компонент.

Объект ActivatedRoute имеет массив 'pathFromRoot', последний элемент массива которого содержит путь конфигурации маршрутизатора в 'routerConfig' со значением параметра (ieiauthedit)/: itemCode), который затем объединяется в полный путь конфигурации маршрутизатора.

Поскольку вам нужен полный путь маршрута без параметров маршрута, вы можете использовать строковую операцию для извлечения пути перед параметрами маршрута, как показано ниже

    constructor(private router: Router, private route: ActivatedRoute) {
        let url = this.router.url;
        const index = this.router.url.lastIndexOf(this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path.split('/')[0]);    
        url = this.router.url.substring(0, index) + this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path;
        console.log(this.router.url) //  /iauth/iauthedit/1853
        console.log(url) // /iauth/iauthedit/:itemCode
        let yourRequiredUrl = url.split(':')[0]  // /iauth/iauthedit/
}

Надеюсь, это поможет.

Answer 3

Проблема с предоставленным ActivatedRoute от Angular заключается в том, что его значение зависит от компонента, в который он введен.Действительно, когда вы вводите ActivatedRoute в компонент, значение будет не полным маршрутом, а частью маршрута, на котором отображен компонент.

Это означает, что если вы хотите получить полный URL-адрес вКомпонент, который содержит ввод «кода элемента», вы просто не можете сделать это с помощью Angular API.Поэтому я предлагаю вам проанализировать URL-адрес с помощью встроенного API Javascript, а затем запустить навигацию с помощью this.router.navigate.

. На данный момент Angular довольно умный, он не будет перезагружать компоненты, и вы будетеспособен реагировать на изменение параметров с помощью this.activatedRoute.params.subscribe(...), затем загружать новые данные и передавать их дочерним элементам через @Input() свойства.