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'];
       });
     }
   }
   

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