Диалоговое окно создания углового материала в том же компоненте, что и существующая функциональность - PullRequest
0 голосов
/ 13 сентября 2018

Я пытаюсь добавить диалоговое окно Angular Material (только заголовок и да / нет), которое вызывается перед выполнением моей веб-службы.Дело в том, что я не хочу создавать диалоги HTML в отдельном компоненте.Мне нужно, чтобы диалоги HTML были в том же файле, что и мой существующий код.Диалог должен открываться, когда я нажимаю кнопку callAPI.Вот мой существующий код компонента

<mat-tab-group>
    <mat-tab label="Tab 1">
       <button mat-flat-button color="warn" (click)="callAPI()">Open Dialog</button>
    </mat-tab>
    <mat-tab label="Tab 2">
    </mat-tab>
</mat-tab-group>
callAPI() {
    this.http.get<any>('https://example.com/api').subscribe(data => {
      this.data = data;
      this.loading = false;
    },
    err => {
        this.loading = false;
    });
}

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Изначально я попробовал то, что предложил Эдрик, и диалоговое окно открылось идеально, но я немного растерялся, когда захотел закрыть его из компонента после некоторой обработки, а не только с помощью директивы шаблона matDialogClose.Поэтому я провел поиск по этой теме, и мне потребовалось некоторое время, чтобы объединить все части и выяснить, что ссылка на шаблон - это нечто иное, чем ссылка на диалог этого фрагмента шаблона.Итак, приступим к работе, собрав все воедино ...

<!-- Edit Company -->
<ng-template #editCompanyModal>
  <div class="mat-dialog-header border-bottom">
    <h2 mat-dialog-title class="mb-0">Edit Company</h2>
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
      <button mat-icon-button matDialogClose tabindex="-1">
        <mat-icon aria-label="Close dialog">close</mat-icon>
      </button>
    </div>
  </div>
  <form #editCompanyForm="ngForm" role="form" novalidate name="editCompanyForm"
          (ngSubmit)="editCompanyFormSubmit(editCompanyForm)">
    <mat-dialog-content>
      <fieldset>
        ...
      </fieldset>
    </mat-dialog-content>
    <mat-dialog-actions class="border-top">
      <button type="button" mat-button matDialogClose>Cancel</button>
      <button type="submit" mat-raised-button color="accent"
              [disabled]="!editCompanyForm.valid">Save changes</button>
    </mat-dialog-actions>
  </form>
</ng-template>
@Component({
  ...
})
export class AccountCompanyComponent {

  @ViewChild('editCompanyModal') editCompanyModal: TemplateRef<any>;
  private editCompanyDialogRef: MatDialogRef<TemplateRef<any>>;

  constructor(public dialog: MatDialog) {}

  // Dialog handling

  openCompanyDetailsDialog(): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.restoreFocus = false;
    dialogConfig.autoFocus = false;
    dialogConfig.role = 'dialog';

    this.editCompanyDialogRef = this.dialog.open(this.editCompanyModal, dialogConfig);

    this.editCompanyDialogRef.afterClosed().subscribe(result => {
      consoleOut('The dialog was closed...');
    });
  }

  closeCompanyDetailsDialog() {
    this.editCompanyDialogRef.close();
  }

  editCompanyFormSubmit(form: NgForm) {
    if (!form.valid) {
      return false;
    }
    // Save company data
  }
0 голосов
/ 13 сентября 2018

Вы можете передать шаблон ссылки на MatDialog#open:

<ng-template #callAPIDialog>
    <h2 matDialogTitle>Hello dialog!</h2>
    <mat-dialog-actions align="end">
        <button mat-button matDialogClose="no">No</button>
        <button mat-button matDialogClose="yes">Yes</button>
    </mat-dialog-actions>
</ng-template>
import { TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material';

@Component({ /* */ })
export class MyComponent {

    @ViewChild('callAPIDialog') callAPIDialog: TemplateRef;

    constructor(private dialog: MatDialog) { }

    callAPI() {
        let dialogRef = this.dialog.open(this.callAPIDialog);
        dialogRef.afterClosed().subscribe(result => {
            // Note: If the user clicks outside the dialog or presses the escape key, there'll be no result
            if (result !== undefined) {
                if (result === 'yes') {
                    // TODO: Replace the following line with your code.
                    console.log('User clicked yes.');
                } else if (result === 'no') {
                    // TODO: Replace the following line with your code.
                    console.log('User clicked no.');
                }
            }
        })
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...