Angular 9 - Маршруты

Question

Я очень новичок в Angular 9.

Вот мои маршруты:

http://localhost: 4200 / pc_configuration

-> затем go для входа в систему

http://localhost: 4200 / PC2 / login

- все работает нормально, но при входе в систему панель инструментов перезаписывает id (PC2)

http://localhost: 4200 / приборная панель /

- должно быть

http://localhost: 4200 / ПК2 / приборная панель /

Это мои маршруты:

const routes: Routes = [
    { path: '', children:[
        { path: '', redirectTo: 'pc_configuration', pathMatch:'full' },
        { path: 'pc_configuration', component: PcConfigComponent },
        { path: ':id', children:[
            { path: '', redirectTo:'login', pathMatch:'full'},
            { path: 'login', component: Login2Component },
            { path: 'dashboard', component: DashboardComponent},
        ]}  
    ]},
];

и это мой метод входа в систему:

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

export class Login2Component {

    constructor(private route:Router){}

    onLogIn(){       

        this.route.navigateByUrl('/dashboard');

    }
}

Что я сделал не так?

Answer 1

У меня есть 2 варианта, которые я могу придумать.

1. Перейти к полному маршруту, включая ваш параметр.
2. Перейти к маршруту относительно текущего маршрута

В любом случае вам нужно будет ввести текущий маршрут, например ActivatedRoute.

Перейти к полному маршруту

Вам потребуется получить текущий id param от маршрута

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

export class Login2Component {

  constructor(private route:Router, private route: ActivatedRoute){}

  onLogIn() {       
    const id: string = this.route.snapshot.params.id;
    this.route.navigateByUrl(`/${id}/dashboard`);
  }
}

Переход к относительному маршруту

Вы можете перейти к братскому маршруту, используя шаблон ../{sibling} и указав relativeTo: this.route.

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

export class Login2Component {

  constructor(private route:Router, private route: ActivatedRoute){}

  onLogIn() {       
    this.route.navigate([`../dashboard`], {
      relativeTo: this.route
    });
  }
}

Что лучше?

Хотя вариант 2 выглядит чище, я лично предпочитаю вариант 1. Это означает, что вы можете реорганизовать иерархию маршрутов, не беспокоясь о нарушении относительной навигации. Это только мое мнение, хотя. Любой вариант технически приемлем.

Answer 2

Вам необходимо ориентироваться относительно вашего текущего маршрута. Это лучше, так что вам не нужно отслеживать P C: id.

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

....
this.router.navigate(['dashboard'], {relativeTo: this.route});
...