探索 Angular 5 路由传值的新方式，解锁强大的路由应用

2023-10-18 04:12:37

Angular 5 路由传值方式

Angular 5 提供了多种灵活的路由传值方式，包括：

路由参数：可以在路由路径中传递参数，并通过 ActivatedRoute 服务访问这些参数。
查询参数：可以在 URL 中传递查询参数，并通过 Location 服务访问这些参数。
服务：可以使用服务在组件之间传递数据，服务可以存储共享数据并提供数据访问接口。
发布-订阅：可以使用发布-订阅模式在组件之间传递数据，组件可以订阅事件并接收数据。

路由参数

路由参数是最常用的路由传值方式之一。可以在路由路径中定义参数，然后在组件中通过 ActivatedRoute 服务访问这些参数。例如，以下路由路径定义了一个名为 id 的参数：

/users/:id

在组件中，可以使用 ActivatedRoute 服务访问参数值：

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

export class UserDetailComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}

查询参数

查询参数是另一种常用的路由传值方式。可以在 URL 中传递查询参数，并通过 Location 服务访问这些参数。例如，以下 URL 包含了一个名为 page 的查询参数：

/users?page=2

在组件中，可以使用 Location 服务访问查询参数值：

import { Location } from '@angular/common';

export class UserListComponent {
  constructor(private location: Location) {}

  ngOnInit() {
    this.page = this.location.search.slice(6);
  }
}

服务

服务也是一种常用的路由传值方式。可以使用服务在组件之间传递数据，服务可以存储共享数据并提供数据访问接口。例如，以下服务定义了一个名为 UserService 的服务，该服务存储了所有用户数据：

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  private users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ];

  getUsers() {
    return this.users;
  }
}

在组件中，可以使用 UserService 服务访问用户数据：

import { UserService } from './user.service';

export class UserListComponent {
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users = this.userService.getUsers();
  }
}

发布-订阅

发布-订阅也是一种常用的路由传值方式。可以使用发布-订阅模式在组件之间传递数据，组件可以订阅事件并接收数据。例如，以下组件定义了一个名为 UserListComponent 的组件，该组件订阅了 UserService 服务的 userAdded 事件：

import { Component, OnDestroy } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'user-list',
  template: `<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>`
})
export class UserListComponent implements OnDestroy {
  private users: any[];
  private subscription: Subscription;

  constructor(private userService: UserService) {
    this.subscription = this.userService.userAdded.subscribe(user => {
      this.users.push(user);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

在 UserService 服务中，可以使用 Subject 对象触发 userAdded 事件：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class UserService {
  private userAdded = new Subject<any>();

  addUser(user) {
    this.users.push(user);
    this.userAdded.next(user);
  }
}