Angular 9 - 路线

Question

我是 Angular 9 的新手。

这些是我的路线：

http://localhost:4200/pc_configuration

--> 然后去登录

http://localhost:4200/PC2/login

-- 工作正常，但是当我登录时，仪表板会覆盖 ID (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');

    }
}

我做错了什么？

Answer 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。这意味着您可以重构路由层次结构而不必担心破坏相对导航。这只是我的意见。这两种选择在技术上都是可以接受的。

Answer 2

您需要相对于当前路线导航。这样更好，这样您就不需要跟踪 PC :id.

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

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

Angular 9 - 路线

Angular 9 - Routes

typescript

angular

angular8

angular9

导航到完整路线

导航到相对路径

哪个更好？