如何在Angular中将Dob组件的值传递给Amount组件

我来帮你梳理下在Angular里实现Dob组件到Amount组件值传递的几种常见方案，结合你给出的Amount组件代码来具体说明：

场景1：Dob组件是父组件，Amount是子组件 #

你提供的Amount组件已经通过@Input()声明了接收外部值的属性greetMessage，这种场景下直接通过父子组件绑定即可实现传值：

步骤1：补全Dob组件代码 #

// dobcomponent.component.ts
import { Component } from "@angular/core";

@Component({
  selector: 'app-dob',
  templateUrl: './dobcomponent.component.html'
})
export class DobComponent {
  // 存储Dob组件的输入值
  dobValue: string = '';

  // 监听日期输入框的变化
  onDobChange(event: any) {
    this.dobValue = event.target.value;
  }
}

步骤2：编写Dob组件模板 #

<!-- dobcomponent.component.html -->
<input type="date" (change)="onDobChange($event)">
<!-- 引用Amount子组件，通过属性绑定传递值 -->
<appchild [greetMessage]="dobValue"></appchild>

这样当Dob组件的日期输入框值变化时，会自动通过@Input()传递给Amount组件，Amount的<h2>标签就会实时显示这个日期值。

场景2：Dob和Amount是兄弟组件（共享同一父组件） #

如果两个组件是同级关系，我们可以通过父组件中转或者共享服务两种方式实现传值：

方法A：父组件中转 #

1. 父组件定义共享变量：

// parent.component.ts
import { Component } from "@angular/core";

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 存储要传递的共享值
  sharedDobValue: string = '';
}

2. 父组件模板绑定两个子组件：

<!-- parent.component.html -->
<!-- Dob组件通过@Output()发射值到父组件 -->
<app-dob (dobOutput)="sharedDobValue = $event"></app-dob>
<!-- Amount组件通过@Input()接收父组件的共享值 -->
<appchild [greetMessage]="sharedDobValue"></appchild>

3. 修改Dob组件添加@Output()：

// dobcomponent.component.ts
import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: 'app-dob',
  templateUrl: './dobcomponent.component.html'
})
export class DobComponent {
  // 定义输出事件发射器
  @Output() dobOutput = new EventEmitter<string>();

  onDobChange(event: any) {
    this.dobOutput.emit(event.target.value);
  }
}

方法B：使用共享服务（适合复杂场景） #

这种方式不受组件层级限制，是Angular中跨组件传值的常用方案：

1. 创建共享数据服务：

// data-sharing.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataSharingService {
  // 创建Subject作为消息载体
  private dobSubject = new Subject<string>();
  // 暴露可观察对象供订阅
  dob$ = this.dobSubject.asObservable();

  // 发送值的方法
  sendDobValue(value: string) {
    this.dobSubject.next(value);
  }
}

2. 修改Dob组件注入服务并发送值：

// dobcomponent.component.ts
import { Component } from "@angular/core";
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-dob',
  templateUrl: './dobcomponent.component.html'
})
export class DobComponent {
  constructor(private dataService: DataSharingService) {}

  onDobChange(event: any) {
    this.dataService.sendDobValue(event.target.value);
  }
}

3. 修改Amount组件订阅服务的值：

// amountcomponent.component.ts
import { Component,Input,OnInit, OnDestroy} from '@angular/core';
import { DataSharingService } from './data-sharing.service';
import { Subscription } from 'rxjs';

@Component({
 selector: 'appchild',
 templateUrl: './amountcomponent.component.html'
})
export class AmountComponent implements OnInit, OnDestroy{
 @Input() greetMessage: string ;
 // 存储订阅实例，防止内存泄漏
 private subscription: Subscription;

 constructor(private dataService: DataSharingService) {}

 ngOnInit(){
   // 订阅服务中的值变化
   this.subscription = this.dataService.dob$.subscribe(value => {
     this.greetMessage = value;
   });
 }

 onKey(event: any) {
  console.log(event.target.value)
 }

 ngOnDestroy() {
   // 组件销毁时取消订阅
   this.subscription.unsubscribe();
 }
}

内容的提问来源于stack exchange，提问作者hari prasanth