如何在两个组件间传递surname值？现有代码实现问题咨询

我有两个组件，Set.ts 里的 updateSurname 方法可以获取并打印出 surname 值，代码如下：

updateSurname() {
  this.alertController.create({
    inputs: [
      { name: 'surname', },
    ],
    handler: data => { 
      console.log(data.surname) 
    }
  }).present();
}

执行 console.log(data.surname) 时能拿到目标的 surname 值，现在我想在另一个组件 Whereiwanttoreadthevalue.ts 里获取这个值，目前的写法是：

import { Set } from '../../pages/settings/set';
export class MessageModal {
  surname = this.data.surname;
  // ...其他代码
}

但这样没法拿到值，请问该怎么实现跨组件获取这个 surname 值？

嘿，针对你的跨组件传值需求，我给你整理了几种实用的方案，你可以根据组件之间的关系来选最合适的：

方案1：共享服务（通用跨组件传值首选） #

如果两个组件没有直接的父子关系，共享服务是Angular里最标准的解决方案，步骤很清晰：

1. 创建共享服务
   先写一个保存和传递数据的服务，比如 UserService：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  // 用BehaviorSubject存储surname，支持订阅变化
  private surnameSubject = new BehaviorSubject<string>('');
  // 暴露可观察对象，供其他组件订阅
  surname$ = this.surnameSubject.asObservable();

  // 更新surname的方法
  updateSurname(newSurname: string) {
    this.surnameSubject.next(newSurname);
  }
}

2. 在Set组件里更新服务数据
   注入服务，拿到surname后调用服务的更新方法：

import { UserService } from '../services/user.service';
import { AlertController } from '@ionic/angular';

export class Set {
  constructor(
    private alertController: AlertController,
    private userService: UserService
  ) {}

  updateSurname() {
    this.alertController.create({
      inputs: [{ name: 'surname' }],
      handler: data => {
        console.log(data.surname);
        // 把新的surname传给服务
        this.userService.updateSurname(data.surname);
      }
    }).present();
  }
}

3. 在目标组件里订阅数据
   注入服务，监听surname的变化并赋值：

import { UserService } from '../services/user.service';
import { OnInit } from '@angular/core';

export class MessageModal implements OnInit {
  surname: string = '';

  constructor(private userService: UserService) {}

  ngOnInit() {
    // 订阅surname的变化，一旦有更新就同步到组件变量
    this.userService.surname$.subscribe(newSurname => {
      this.surname = newSurname;
    });
  }
}

方案2：模态框返回值（如果用了模态组件） #

从你的代码里的 present() 来看，你应该是用了Ionic的Alert或者模态组件。如果Set是一个模态框，或者你是通过模态框获取surname，那可以直接通过模态框的返回值传递数据：

情况A：用Alert组件获取值并返回 #

修改Set.ts的Alert，关闭时返回数据，然后在调用Alert的地方接收：

// Set.ts
updateSurname() {
  this.alertController.create({
    inputs: [{ name: 'surname' }],
    buttons: [
      { text: '取消' },
      { 
        text: '确认',
        handler: data => {
          // 返回输入的surname
          return data.surname;
        }
      }
    ]
  }).then(alert => {
    alert.present();
    // 监听Alert关闭事件，拿到返回值
    alert.onDidDismiss().then(result => {
      if (result.data) {
        console.log('拿到的surname:', result.data);
        // 这里可以把值传递给其他组件，比如通过服务或者回调
      }
    });
  });
}

情况B：Set本身是模态组件 #

如果Set是一个独立的模态组件，在打开它的MessageModal里可以这样获取返回值：

// MessageModal.ts
import { ModalController } from '@ionic/angular';
import { Set } from '../../pages/settings/set';

export class MessageModal {
  surname: string = '';

  constructor(private modalController: ModalController) {}

  async openSetModal() {
    const modal = await this.modalController.create({
      component: Set
    });
    await modal.present();
    // 获取模态框关闭时返回的数据
    const { data } = await modal.onDidDismiss();
    if (data?.surname) {
      this.surname = data.surname;
    }
  }
}

然后在Set.ts里关闭模态框时传递数据：

// Set.ts
import { ModalController } from '@ionic/angular';

export class Set {
  constructor(private modalController: ModalController) {}

  updateSurname() {
    // 假设这里已经拿到了surname值
    const inputSurname = '获取到的surname';
    // 关闭模态框并传递数据
    this.modalController.dismiss({ surname: inputSurname });
  }
}

方案3：@Input/@Output（父子组件专属） #

如果两个组件是明确的父子关系（比如Set是MessageModal的子组件），那用@Input和@Output就足够了：

1. 子组件Set.ts发射事件
   用@Output定义一个事件发射器，拿到surname后发射事件：

import { Output, EventEmitter } from '@angular/core';
import { AlertController } from '@ionic/angular';

export class Set {
  @Output() surnameUpdated = new EventEmitter<string>();

  constructor(private alertController: AlertController) {}

  updateSurname() {
    this.alertController.create({
      inputs: [{ name: 'surname' }],
      handler: data => {
        console.log(data.surname);
        // 发射事件，把surname传给父组件
        this.surnameUpdated.emit(data.surname);
      }
    }).present();
  }
}

2. 父组件MessageModal.ts接收事件
   在模板里绑定子组件的事件，然后在类里处理：

<!-- MessageModal的模板 -->
<app-set (surnameUpdated)="handleSurnameUpdate($event)"></app-set>

// MessageModal.ts
export class MessageModal {
  surname: string = '';

  handleSurnameUpdate(newSurname: string) {
    this.surname = newSurname;
  }
}

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