Угловой 9 — Маршруты

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

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

http://localhost:4200/pc_configuration

--> затем войдите в систему

http://localhost:4200/PC2/login

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

http://localhost:4200/dashboard/

-- так должно быть

http://localhost:4200/PC2/dashboard/

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

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

    }
}

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


typescript angular angular8 angular9
person PanterP    schedule 18.03.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

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

Вам нужно будет получить текущий параметр id из маршрута

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. Это означает, что вы можете реорганизовать свою иерархию маршрутов, не беспокоясь о нарушении относительной навигации. Это всего лишь мое мнение. Любой вариант технически приемлем.

person Kurt Hamilton    schedule 18.03.2020

arrow_upward
0
arrow_downward

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

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

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