Question

所以我遇到的问题是，我已经为当前项目创建了对话框弹出窗口的格式，并且该论坛上类似问题的大多数其他答案都有将原始javascript实现到代码中的答案，但我没有这样做希望做。因此，按照堆栈顺序，首先是要在整个应用程序中共享的确认组件：

确认组件TS：

import { Component, Inject } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

export class SharedConfirmationDialogObject {
    header: string;
    body: string;
    confirmBtnText: string;
    declineBtnText: string;
}

@Component({
    selector: 'acmx-shared-confirmation-dialog',
    templateUrl: 'confirmation.component.html',
    styleUrls: ['confirmation.component.css']
})
export class SharedConfirmationDialogComponent {

    constructor(public dialogRef: MatDialogRef<SharedConfirmationDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: SharedConfirmationDialogObject) {
            console.log(data);
        }

    onNoClick(): void {
        this.dialogRef.close();
    }
}

确认组件HTML：

<h1 mat-dialog-title><u>{{data.header}}</u></h1>
<mat-dialog-content>
    {{data.body}}
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button type="button" mat-dialog-close>{{data.declineBtnText}}</button>
    <button mat-button type="button" (click)="dialogRef.close(true)">{{data.confirmBtnText}}</button>
</mat-dialog-actions>

受影响的分量TS方法

  public openDialog(): void {
    const dialogRef = this.dialog.open(SharedConfirmationDialogComponent, {
      width: '550px',
      height: '500px',
      data: {oilForm: this.oilForm}
      });
    }

用于启动弹出窗口的按钮：

<mat-card-actions class="text-center">
  <button mat-raised-button [disabled]="dataService.loading || dataService.oilForm.invalid" color="primary"
          (click)= "openDialog()">Submit
  </button>

这是我开始遇到问题的地方，因为所有这些都为我带来了弹出窗口的轮廓，但是我为在字段中填充内容所做的任何尝试，无论是创建可处理内容的新类html还是在对话框中，创建绑定到共享对话框组件的本地组件对象，并将这些对象放置在打开的对话框调用中（在浏览器检查中称其为抽象控件）。我只需要知道需要执行什么操作，而无需在任何地方实现原始JS。再次感谢有关此问题的帮助和信息来源。

更新：这是我说的将共享组件对象与本地创建的对话框对象绑定在一起的意思：

受影响的TS：

private headerObject: SharedConfirmationDialogObject;
  private bodyObject: SharedConfirmationDialogObject;
  private confirmObject: SharedConfirmationDialogObject;
  private cancelObject: SharedConfirmationDialogObject;

  public setConfirmationObject() {
    this.headerObject.header = 'Oil Coupon Save Confirmation';
    this.bodyObject.body = 'Are You Sure You Want to Save? This Action Cannot Be Undone.';
    this.confirmObject.confirmBtnText = 'Save';
    this.cancelObject.declineBtnText = 'Cancel';
  }

对话框弹出窗口未填充角度材料ts

0 个答案: