angular中实现控制器之间传递参数的方式

ny) {
this.sharedData = data;
}

getSharedData() {
return this.sharedData;
}
}

### 步骤二：在发送参数的控制器中设置参数值

在发送参数的控制器中，通过依赖注入方式引入共享服务，并使用`setSharedData`方法设置参数值。

```typescript
import { Component } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'sender-component',
  template: `
    <button (click)=\"sendData()\">发送参数</button>
  `
})
export class SenderComponent {
  constructor(private sharedService: SharedService) { }

  sendData() {
    const data = 'Hello, World!';
    this.sharedService.setSharedData(data);
  }
}

步骤三：在接收参数的控制器中获取参数值

在接收参数的控制器中，同样通过依赖注入方式引入共享服务，并使用getSharedData方法获取参数值。

import { Component } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'receiver-component',
  template: `
    <div>{{ receivedData }}</div>
  `
})
export class ReceiverComponent {
  receivedData: any;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.receivedData = this.sharedService.getSharedData();
  }
}

2. 使用路由参数进行参数传递

另一种常用的方式是使用路由参数进行参数传递。以下是实现步骤：

步骤一：定义路由配���

在定义路由时，可以通过在路由路径中添加参数占位符来传递参数。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ReceiverComponent } from 'path/to/receiver.component';

const routes: Routes = [
  { path: 'receiver/:data', component: ReceiverComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤二：在发送参数的控制器中导航到接收参数的控制器

在发送参数的控制器中，使用Router服务的navigate方法导航到接收参数的控制器，并将参数值作为路由参数传递。

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'sender-component',
  template: `
    <button (click)=\"sendData()\">发送参数</button>
  `
})
export class SenderComponent {
  constructor(private router: Router) { }

  sendData() {
    const data = 'Hello, World!';
    this.router.navigate(['/receiver', data]);
  }
}

步骤三：在接收参数的控制器中获取参数值

在接收参数的控制器中，可以通过ActivatedRoute服务的params属性获取路由参数的值。

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

@Component({
  selector: 'receiver-component',
  template: `
    <div>{{ receivedData }}</div>
  `
})
export class ReceiverComponent {
  receivedData: any;

  constructor(private route: ActivatedRoute) { }

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

以上就是在Angular中实现控制器之间传递参数的两种常用方式的详细攻略。通过使用共享服务或路由参数，可以轻松地在不同的控制器之间传递参数。