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

Question

我正在尝试使用 <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>

感谢您提供的任何帮助！

Answer 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();
  }
}