angular跨组件传值的方法是什么

在Angular中，可以通过以下几种方法实现跨组件传值：

1. 通过@Input和@Output装饰器：通过在父组件中使用@Input装饰器将数据传递给子组件，子组件中可以通过@Output装饰器和EventEmitter来传递数据回父组件。

父组件中的传递数据示例：

// 父组件中 import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` <app-child [data]="parentData" (dataEvent)="receiveData($event)"></app-child> ` }) export class ParentComponent { parentData: string = 'Hello World'; receiveData(data: string) { console.log(data); } } 

子组件中的接收数据示例：

// 子组件中 import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <p>{{ data }}</p> <button (click)="sendData()">Send Data</button> ` }) export class ChildComponent { @Input() data: string; @Output() dataEvent: EventEmitter<string> = new EventEmitter<string>(); sendData() { this.dataEvent.emit('Data from child component'); } } 

2. 使用服务（Service）：创建一个共享的服务，可以在多个组件之间共享数据。

创建一个共享的服务：

// 服务中 import { Injectable } from '@angular/core'; @Injectable() export class DataService { private data: string = ''; setData(data: string) { this.data = data; } getData() { return this.data; } } 

在组件中使用服务：

// 组件中 import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-parent', template: ` <p>{{ data }}</p> <button (click)="setData()">Set Data</button> `, providers: [DataService] }) export class ParentComponent { data: string = ''; constructor(private dataService: DataService) {} setData() { this.dataService.setData('Data from parent component'); } ngOnInit() { this.data = this.dataService.getData(); } } 

3. 使用路由参数：可以通过路由参数来传递数据给目标组件。

在路由配置中定义路由参数：

// 路由模块中 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ChildComponent } from './child.component'; const routes: Routes = [ { path: 'child/:data', component: ChildComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 

在目标组件中获取路由参数：

// 目标组件中 import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-child', template: ` <p>{{ data }}</p> ` }) export class ChildComponent { data: string = ''; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params.subscribe(params => { this.data = params['data']; }); } } 

通过以上方法，你可以在Angular中实现跨组件传值。