Angular 10/Ionic 5 - 将输入数据从模态传递到父组件

Posted 2023-03-13

【中文标题】Angular 10/Ionic 5 - 将输入数据从模态传递到父组件

【英文标题】：Angular 10/Ionic 5 - Passing input data from a modal to a parent component

【发布时间】：2020-11-02 05:05:18

【问题描述】：

我正在尝试使用 <ion-input></ion-input> 从离子模式传递数据。然后将返回的数据发送到 Firebase 后端。

更具体地说，我希望在按下按钮时创建一个新的“工作区”。这个工作区有一个标题，当点击一个按钮时，我想显示一个模式，询问这个新工作区的标题。在另一个按钮按下时，标题被传递给父组件，父组件将输入数据传递到 firebase 中的新工作区文档。它还为其提供了当前用户 uID 的条目。

我是角度和离子的新手，所以我尝试在模态组件中进行 2 向数据绑定，但对离子/角度混合或离子模态没有足够的把握，无法检测到问题.

目前，这是按下模态按钮时显示的错误：

Uncaught (in promise): Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 1 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

有一个工作区界面，我设置为any：

export interface Workspace 
  id?: any;
  title?: any;
  description?: any;
  color?: "blue" | "red" | "yellow";
  priority?: any;

这里是父组件.ts，省略了不必要的代码：

import  Component, OnInit, OnDestroy  from "@angular/core";
import  Workspace  from "../models/workspace.model";
import  Subscription  from "rxjs";
import  WorkspaceService  from "src/app/services/workspace.service";
// ADD THE MODAL
import  ModalController  from "@ionic/angular";
import  WorkspaceModalComponent  from "../modals/workspace-modal.component";

@Component(
  selector: "app-workspaces",
  templateUrl: "./workspaces.component.html",
  styleUrls: ["./workspaces.component.scss"],
)
export class WorkspacesComponent implements OnInit, OnDestroy 
  // HANDLE WORKSPACE SUBSCRIPTION (Some code here not used) 
  workspace: Workspace;
  workspaces: Workspace[];
  sub: Subscription;

  constructor(
    public workspaceService: WorkspaceService,
    public modalController: ModalController
  ) 

  // GET ALL WORKSPACES AND POPULATE THE WORKSPACES ARRAY
  ngOnInit() 
    this.sub = this.workspaceService
      .getUserWorkspaces()
      .subscribe((workspaces) => 
        this.workspaces = workspaces;
      );
  

  /**
   * PRESENT THE MODAL FOR CREATING A NEW WORKSPACE
   * RETURN OF AN ASYNC FUNCTION HAS TO BE A PROMISE
   */
  async openWorkspaceModal() 
    const workspaceListModal = await this.modalController.create(
      component: WorkspaceModalComponent,
      // because this is a new workspace, there is no data being passed to the modal component
      componentProps: ,
    );
    workspaceListModal.onDidDismiss().then((data) => 
      if (data) 
        this.workspaceService.createWorkspace(
          title: data,
        );
      
    );
    return await workspaceListModal.present();
  

家长html:

<div class="workspaceGrid" style="padding-right: 30px;">
  <!-- [workspace]="workspace" passes the data down to the child component via an input property *ngFor="let workspace of workspaces" -->
  <app-workspace
    *ngFor="let workspace of workspaces"
    [workspace]="workspace"
  ></app-workspace>
  <ion-button (click)="openWorkspaceModal()">
    Open Modal
  </ion-button>
</div>

这是自定义工作区服务.ts 帮助在数据库中创建新工作区，其中包含用户 ID 和从模态（title prop）收集的数据：

import  Injectable  from "@angular/core";
import  AngularFireAuth  from "@angular/fire/auth";
import  AngularFirestore  from "@angular/fire/firestore";
import * as firebase from "firebase/app";
import  switchMap, map  from "rxjs/operators";
import  Workspace  from "../home/models/workspace.model";

@Injectable(
  providedIn: "root",
)
export class WorkspaceService 
  constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) 

  /**
   *
   * @param data
   * CREATES A WORKSPACE IN THE DATABASE BASED ON THE CURRENTLY LOGGED IN USER
   */
  async createWorkspace(data: Workspace) 
    const user = await this.afAuth.currentUser;
    return this.db.collection("workspaces").add(
      ...data,
      // automatically sets the UID property of the workspace here
      uid: user.uid,
    );
  

模态组件.ts和模态html：

import  Component, Inject  from "@angular/core";
import  ModalController  from "@ionic/angular";
import  WorkspacesComponent  from "../workspaces/workspaces.component";
import  Workspace  from "../models/workspace.model";

@Component(
  selector: "app-workspace-modal",
  templateUrl: "./workspace-modal.component.html",
  styles: [],
)
export class WorkspaceModalComponent 
  constructor(public modalController: ModalController, public data: any) 

  /**
   * CLOSE THE MODAL ON CLICK
   */
  async closeWorkspaceModal() 
    await this.modalController.dismiss();
  

<ion-header color="primary" mode="ios">
  <ion-toolbar>
    <ion-title>New Workspace</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="closeWorkspaceModal()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-input
      placeholder="Enter a title for the workspace"
      [(ngModel)]="data.title"
    >
    </ion-input>
  </ion-item>
  <!-- HANDLE SUBMISSION OF THE CONTENT -->
  <ion-button [data]="data.title" (click)="closeWorkspaceModal()"
    >Create Workspace</ion-button
  >
</ion-content>

感谢您提供的任何帮助！

【参考方案1】：

问题出在WorkspaceModalComponent 的构造函数中，你声明了一个变量public data: any。 Angular Dependency Injector 分析构造函数中变量的类型，并尝试根据类型分配适当的实例。在这种情况下，类型是any，因此 Angular 无法确定要注入的依赖项。您应该将此变量声明为该类的成员。像这样的：

export class WorkspaceModalComponent 
  public data: any;

  constructor(public modalController: ModalController) 

  /**
   * CLOSE THE MODAL ON CLICK
   */
  async closeWorkspaceModal() 
    await this.modalController.dismiss();