Angular router---有参数的路由

2024-02-12 11:31:07

Angular中如何声明有参数的路由

在Angular中，使用冒号 (:) 声明一个带有参数的路由。例如，以下路由声明了一个带有参数 id 的路由：

const routes = [
  { path: 'users/:id', component: UserDetailComponent },
];

当浏览器地址栏中输入 users/1 时，Angular 会将该路由与路径 users/:id 匹配，并把参数 1 传递给 UserDetailComponent 组件。

Angular中如何访问路由参数

在Angular中，可以使用 ActivatedRoute 服务来访问路由参数。ActivatedRoute 服务是一个提供有关当前激活路由的信息的注入服务。要获取路由参数，可以使用 ActivatedRoute 服务的 params 属性。例如，以下代码显示了如何获取用户详细信息组件中的 id 路由参数：

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

@Component({
  selector: 'user-detail',
  templateUrl: './user-detail.component.html',
})
export class UserDetailComponent {
  id: number;

  constructor(private activatedRoute: ActivatedRoute) {
    this.id = this.activatedRoute.params.subscribe(params => {
      this.id = params['id'];
    });
  }
}

Angular中如何使用路由参数

Angular中的路由参数可以用于各种目的，例如：

在组件中加载数据：可以使用路由参数来加载组件中所需的数据。例如，在用户详细信息组件中，可以使用 id 路由参数来加载有关特定用户的信息。
在组件之间导航：可以使用路由参数在组件之间导航。例如，在用户详细信息组件中，可以使用 id 路由参数导航到其他用户的详细信息组件。
在组件中创建表单：可以使用路由参数在组件中创建表单。例如，在用户详细信息组件中，可以使用 id 路由参数创建用于编辑用户详细信息的表单。

Angular中如何实现动态路由

动态路由是指可以根据应用程序的状态来更改的路由。例如，以下代码显示了如何实现一个动态路由，该路由根据用户是否已登录来更改：

const routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
];

@Component({
  selector: 'my-app',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent {
  isLoggedIn: boolean = false;

  constructor() {
    this.authService.isLoggedIn$.subscribe(isLoggedIn => {
      this.isLoggedIn = isLoggedIn;
    });
  }

  getRoutes() {
    if (this.isLoggedIn) {
      return routes;
    } else {
      return [
        {
          path: 'login',
          component: LoginComponent,
        },
      ];
    }
  }
}