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

這些方法都可以實現跨組件傳值，具體選擇哪種方法