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

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

通过@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');}}

使用服务（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();}}

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

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

// 路由模块中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中实现跨组件传值。