在 Angular 中如何使用 Modal 中传递的数据

在 Angular 使用 Modal 弹窗的过程中，有时候需要将 Modal 中的数据传递到当前组件中使用。本文将介绍如何在 Angular 中使用 Modal 传递的数据。

步骤

1. 创建 Modal 组件

首先，我们需要创建一个 Modal 组件。在该组件中，我们可以通过 Output 装饰器将数据传递给调用该组件的组件。

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

@Component({
  selector: 'app-modal',
  template: `
    <div>
      <h1>Modal</h1>
      <input [(ngModel)]="modalData" />
      <button (click)="sendData()">Send data</button>
    </div>
  `,
})
export class ModalComponent {
  @Output() dataEvent = new EventEmitter<string>();

  modalData: string = '';

  sendData() {
    this.dataEvent.emit(this.modalData);
  }
}

在上述示例中，我们通过 @Output() 装饰器定义了一个 dataEvent 事件，当模态框中的 Send data 按钮被点击时，我们将模态框中的数据通过该事件传递给调用该组件的组件。

2. 在调用组件中接收 Modal 中传递的数据

接下来，我们需要在调用该 Modal 组件的组件中接收 Modal 传递的数据。为了进行这一步操作，我们需要在 app.module.ts 中导入 ModalModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { ModalModule } from './modal/modal.module';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ModalModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

接下来，在调用 Modal 组件的组件中，我们需要定义一个事件处理器来处理 Modal 中数据传递过来的事件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>App</h1>
      <button (click)="openModal()">Open modal</button>
      <p>Data from modal: {{ modalData }}</p>
    </div>
  `,
})
export class AppComponent {
  modalData: string = '';

  openModal() {
    const modal = new ModalComponent();

    modal.dataEvent.subscribe((data: string) => {
      this.modalData = data;
    });
  }
}

在上述示例中，我们通过 new 运算符创建了 ModalComponent 实例，并订阅了该组件传递到调用组件中的 dataEvent 事件。当 Modal 中的数据被传递到了调用组件中后，我们将数据赋值给 modalData 变量。

结论

在 Angular 中，可以通过 @Output 装饰器将数据从 Modal 组件传递到调用该组件的组件中。在调用该 Modal 组件的组件中，可以订阅 Modal 传递过来的事件，并在事件处理器中接收 Modal 中传递的数据。