如何在组件之间发送数据以响应重定向 - TypeScript

在 Typescript 中，组件之间的数据传递可以通过一些技术来实现，以响应重定向。下面我们将介绍如何实现这一点。

1. 使用路由器

你可以使用路由器来实现组件之间的数据传递。你可以使用路由器导航到另一个组件并将数据作为参数传递。

this.router.navigate(['/component2'], { queryParams: { id: '123' } });

在另一个组件中，你可以读取传递的参数：

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

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.queryParams.subscribe(params => {
    const id = params['id'];
    // 处理参数
  });
}

2. 使用服务

你可以创建一个服务来共享数据。在服务中，你可以定义一个公共属性并让组件通过注入该服务来访问该属性。

@Injectable()
export class DataService {
  public data: string;
}

@Component({
  selector: 'app-component1',
  template: `
  <button (click)="navigate()">Navigate to Component 2</button>
  `
})
export class Component1 {
  constructor(private dataService: DataService, private router: Router) {}

  navigate() {
    this.dataService.data = 'hello';
    this.router.navigate(['/component2']);
  }
}

@Component({
  selector: 'app-component2',
  template: `
  <div>{{ data }}</div>
  `
})
export class Component2 {
  constructor(private dataService: DataService) {}

  get data() {
    return this.dataService.data;
  }
}

在上面的例子中，我们在 DataService 中定义了一个共享数据的属性 data，并在 Component1 中将数据设置为 'hello'。在 Component2 中，我们通过注入 DataService 来获取该数据。

总结

在 Typescript 中，组件之间的数据传递可以通过路由器和服务来实现。你可以使用路由器导航到另一个组件并将数据作为参数传递，也可以创建一个服务来共享数据。这样做可以使你的代码更加模块化和可重用。