angular跨组件传值怎么实现

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

1. 利用@Input和@Output装饰器：通过在子组件中使用@Input装饰器接收父组件传递的值，然后通过@Output装饰器将子组件的值传递给父组件。

   父组件：

   import { Component } from '@angular/core';  @Component({   selector: 'app-parent',   template: `     <h1>Parent Component</h1>     <app-child [childValue]="parentValue" (childEvent)="handleChildEvent($event)"></app-child>   ` }) export class ParentComponent {   parentValue: string;    handleChildEvent(event: string) {     console.log(event);   } } 

   子组件：

   import { Component, Input, Output, EventEmitter } from '@angular/core';  @Component({   selector: 'app-child',   template: `     <h2>Child Component</h2>     <input [(ngModel)]="childValue" (input)="childEvent.emit(childValue)">   ` }) export class ChildComponent {   @Input() childValue: string;   @Output() childEvent = new EventEmitter<string>(); } 

2. 使用服务（Service）：创建一个共享的服务，将要传递的值存储在该服务中，然后在需要访问该值的组件中注入该服务。

   共享服务：

   import { Injectable } from '@angular/core';  @Injectable({   providedIn: 'root' }) export class SharedService {   sharedValue: string; } 

   组件1：

   import { Component } from '@angular/core'; import { SharedService } from './shared.service';  @Component({   selector: 'app-component1',   template: `     <h1>Component 1</h1>     <input [(ngModel)]="sharedService.sharedValue">   ` }) export class Component1Component {   constructor(public sharedService: SharedService) {} } 

   组件2：

   import { Component } from '@angular/core'; import { SharedService } from './shared.service';  @Component({   selector: 'app-component2',   template: `     <h2>Component 2</h2>     <p>{{ sharedService.sharedValue }}</p>   ` }) export class Component2Component {   constructor(public sharedService: SharedService) {} } 

3. 使用路由参数：通过在URL中传递参数，不同组件之间可以通过路由参数进行通信。

   路由配置：

   import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Component1Component } from './component1.component'; import { Component2Component } from './component2.component';  const routes: Routes = [   { path: 'component1/:value', component: Component1Component },   { path: 'component2/:value', component: Component2Component }, ];  @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule] }) export class AppRoutingModule { } 

   组件1：

   import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router';  @Component({   selector: 'app-component1',   template: `     <h1>Component 1</h1>     <p>Value: {{ value }}</p>   ` }) export class Component1Component implements OnInit {   value: string;    constructor(private route: ActivatedRoute) {}    ngOnInit() {     this.route.params.subscribe(params => {       this.value = params['value'];     });   } } 

   组件2：

   import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router';  @Component({   selector: 'app-component2',   template: `     <h2>Component 2</h2>     <p>Value: {{ value }}</p>   ` }) export class Component2Component implements OnInit {   value: string;    constructor(private route: ActivatedRoute) {}    ngOnInit() {     this.route.params.subscribe(params => {       this.value = params['value'];     });   } } 

这些方法都可以实现跨组件传值，具体选择哪种方法