Angular技术问题：如何将一个组件的值传递至另一个组件并显示

根据你给出的代码，我来帮你搞定把AmountComponent的输入值传递到DobComponent并显示的需求，分两种最常见的场景来讲解：

场景1：两个组件是直接父子关系 #

假设DobComponent是父组件，你在它的模板里使用了<appchild>标签（也就是AmountComponent作为子组件），那可以通过**@Output+EventEmitter**实现子向父传值：

第一步：修改AmountComponent，添加事件发射器 #

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'appchild',
  templateUrl: './amountcomponent.component.html'
})
export class AmountComponent implements OnInit{
  @Input() greetMessage: string ;
  // 定义输出事件，用来传递输入值
  @Output() valueChanged = new EventEmitter<string>();

  onKey(event: any) {
    const inputValue = event.target.value;
    console.log(inputValue);
    // 触发事件，把值传给父组件
    this.valueChanged.emit(inputValue);
  }

  ngOnInit(){}
}

第二步：在父组件模板中监听事件并接收值 #

确保DobComponent的模板里有<appchild>标签，然后绑定自定义事件：

<!-- dobcomponent.component.html -->
<appchild [greetMessage]="'Hello'" (valueChanged)="handleValueUpdate($event)"></appchild>
<!-- 展示从子组件传来的值 -->
<p>从Amount组件获取的值：{{ receivedValue }}</p>

第三步：在DobComponent类中处理传值逻辑 #

import { Component } from "@angular/core";
import {AmountComponent} from "./amountcomponent.component";

@Component({
  templateUrl: './dobcomponent.component.html'
})
export class DobComponent {
  receivedValue: string = '';

  handleValueUpdate(value: string) {
    this.receivedValue = value;
    // 这里可以添加你需要的额外逻辑
  }
}

场景2：两个组件是非父子关系（比如兄弟、跨层级） #

这种情况最推荐用共享数据服务来实现值的传递：

第一步：创建共享数据服务 #

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

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  // 用BehaviorSubject保存共享值，初始值为空字符串
  private valueSource = new BehaviorSubject<string>('');
  currentValue = this.valueSource.asObservable();

  constructor() { }

  // 更新共享值的方法
  updateValue(value: string) {
    this.valueSource.next(value);
  }
}

第二步：修改AmountComponent，注入服务并发送值 #

import { Component, Input, OnInit } from '@angular/core';
import { SharedDataService } from './shared-data.service'; // 导入服务

@Component({
  selector: 'appchild',
  templateUrl: './amountcomponent.component.html'
})
export class AmountComponent implements OnInit{
  @Input() greetMessage: string ;

  constructor(private sharedDataService: SharedDataService) {} // 注入服务

  onKey(event: any) {
    const inputValue = event.target.value;
    console.log(inputValue);
    // 通过服务更新共享值
    this.sharedDataService.updateValue(inputValue);
  }

  ngOnInit(){}
}

第三步：修改DobComponent，注入服务并订阅值变化 #

import { Component, OnInit, OnDestroy } from "@angular/core";
import { AmountComponent } from "./amountcomponent.component";
import { SharedDataService } from './shared-data.service'; // 导入服务
import { Subscription } from 'rxjs';

@Component({
  templateUrl: './dobcomponent.component.html'
})
export class DobComponent implements OnInit, OnDestroy {
  receivedValue: string = '';
  private subscription: Subscription = new Subscription();

  constructor(private sharedDataService: SharedDataService) {} // 注入服务

  ngOnInit() {
    // 订阅共享值的变化，实时更新组件内的变量
    this.subscription = this.sharedDataService.currentValue.subscribe(value => {
      this.receivedValue = value;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.subscription.unsubscribe();
  }
}

第四步：在DobComponent模板中展示值 #

<!-- dobcomponent.component.html -->
<p>从Amount组件获取的值：{{ receivedValue }}</p>

这样不管两个组件是什么层级关系，都能顺利实现值的传递啦～

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