Как добавить простое диалоговое окно к моему угловому 7-му приложению?

У меня есть приложение в угловом 7, где я извлекаю данные из api, загружая данные в таблицу. В таблице есть столбец в конце его с помощью кнопки. Нажатие на эту кнопку вызывает функцию, которая будет просто записывать данные строки в консоль. Вот мой код для этого:

Мой файл component.ts:

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { MatTableDataSource } from "@angular/material";
import { Object} from "../object.model";
import {MatDialog, MatDialogRef} from '@angular/material'

@Component({
   styleUrls: ["./styles.scss"],
   templateUrl: "./template.html"
})
export class MyRouteData implements OnInit {
   employeeInfoTable : Object[] = [];
   employeeInfoTableDataSource = new MatTableDataSource(this.employeeInfoTable);
   displayedColumns: string[] = [
     "Name",
     "DateOfBirth",
     "Address",
     "Postcode",
     "Gender",
     "Salary"
     "JobTitle"
     "AdditionalDetails"
  ];

   constructor(private http: HttpClient) {}

   ngOnInit() {
      this.http.get("http://localhost:5000/MyRoute/GetEmployeeInfo")
          .subscribe(response => {
             this.employeeInfoTable = response;
             this.employeeInfoTableDataSource.data = this.employeeInfoTable;
      });
   }

   displayAdditionalDetails(row) {
    console.log("Row sent from link", row);

  }
}

export interface Object{
   id: number;
   Name: string;
   DateOfBirth: Date;
   Address: string;
   Postcode: string;
   Gender: string;
   Salary : number;
   JobTitle : string;
}

мой файл template.html:

<mat-card style="height: 98%">
  <table mat-table [dataSource]="employeeInfoTableDataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef>Name </th>
        <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
    </ng-container>
    <ng-container matColumnDef="DateOfBirth">
        <th mat-header-cell *matHeaderCellDef> Date Of Birth </th>
        <td mat-cell *matCellDef="let element"> {{element.DateOfBirth}} </td>
    </ng-container>
    <ng-container matColumnDef="Address">
        <th mat-header-cell *matHeaderCellDef> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.Address}} </td>
    </ng-container>
    <ng-container matColumnDef="Postcode">
        <th mat-header-cell *matHeaderCellDef> Postcode </th>
        <td mat-cell *matCellDef="let element"> {{element.Postcode}} </td>

    <ng-container matColumnDef="Gender">
        <th mat-header-cell *matHeaderCellDef> Gender </th>
        <td mat-cell *matCellDef="let element"> {{element.Gender}} </td>
    </ng-container>
    <ng-container matColumnDef="Salary">
        <th mat-header-cell *matHeaderCellDef> Salary </th>
        <td mat-cell *matCellDef="let element"> {{element.Salary}} </td>
    </ng-container>
    <ng-container matColumnDef="JobTitle">
        <th mat-header-cell *matHeaderCellDef> Job Title </th>
        <td mat-cell *matCellDef="let element"> {{element.JobTitle}} </td>
    </ng-container>
    <ng-container matColumnDef="AdditionalDetails">
        <th mat-header-cell *matHeaderCellDef> AdditionalDetails </th>
        <td mat-cell *matCellDef="let element">  <button mat-icon-button color="warn" (click)="displayAdditionalDetails(element)">
          <mat-icon aria-label="Example icon-button with a heart icon">description</mat-icon>
        </button></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</mat-card>

Теперь я хочу сделать загрузку диалогового окна при выборе кнопки.

Я добавил новый html-файл с именем dialog-overview-example-dialog.html, который содержит следующее:

<div mat-dialog-content>
    <p>“I find your lack of faith disturbing.” — Darth Vader</p>

</div>

и я добавил следующее к концу моего файла component.ts, который я получил из некоторого учебника:

@Component({
  selector: "dialog-overview-example-dialog",
  templateUrl: "dialog-overview-example-dialog.html"
})
export class DialogOverviewExampleDialog {
  constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) {}

  onCloseClick(): void {
    this.dialogRef.close();
  }
}
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
})

export class DialogOverviewExample {

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: 驌px' 
    });
  }

}

Все, что мне нужно сделать, это выяснить, как загрузить диалоговое окно из метода displayAdditionalDetails. В конце концов я сделаю больше с диалоговым окном, но на данный момент просто загрузка ящика достаточно хороша.

Спасибо.

Всего 1 ответ


Чтобы открыть диалоговое окно:

  • Убедитесь, что MatDialog введен в ваш класс
  • Используя введенный диалог, запустите dialog.open(component, options)
    • component - это то, что вы хотите отобразить в диалоговом окне
    • options позволяют настраивать окно, а также передавать данные в диалоговом окне

Пример:

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData implements OnInit {

  constructor(private dialog: MatDialog) {}

  displayAdditionalDetails(row) {
    this.dialog.open(DialogOverviewExampleDialog, {
      width: 驌px',
      data: row,
    })
  }
}

Это откроет вам диалоговое окно. Обратите внимание на data: row в параметрах. Вот как вы передаете данные в диалог.

Если вы хотите использовать данные в диалоговом окне, вам нужно будет ввести MAT_DIALOG_DATA в ваш компонент диалога, например:

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {

  constructor(
    private dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) private data: any)
  { }

  ngOnInit() {
    console.log(this.data); // this is the "row" passed in
  }

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

}

Если вы используете компиляцию AOT, вам также необходимо будет добавить любые компоненты, отображаемые в виде диалогов в ваш модуль, в entrycomponents :

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  entryComponents: [DialogOverviewExampleDialog],
  exports: [
    ...
  ],
})
export class MyModule {
}

Есть идеи?

10000