Angular 在路由之间传递数据

# Angular中实现路由之间数据传递的完整指南

typescript
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

typescript
// app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile/:username', component: ProfileComponent },
];

typescript
// profile.component.ts
import { ActivatedRoute } from '@angular/router';
// ...
constructor(private route: ActivatedRoute) {}
ngOnInit() {
  this.route.params.subscribe(params => {
    const username = params['username'];
    // 使用获取到的username进行后续操作
  });
}

typescript
// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private messageSource = new BehaviorSubject('Default Message');
  currentMessage = this.messageSource.asObservable();
  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

typescript
// sender.component.ts
import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-sender',
  template: `
    
    Send Message
  `,
})
export class SenderComponent {
  message = '';
  constructor(private dataService: DataService) {}
  sendMessage() {
    this.dataService.changeMessage(this.message);
  }
}

typescript
// receiver.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-receiver',
  template: `
    
Received Message: {{ receivedMessage }}
  `,
})
export class ReceiverComponent implements OnInit {
  receivedMessage = '';
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => {
      this.receivedMessage = message;
    });
  }
}