typescript - Vis en enkel varsel-dialog i Material Angular

Jeg bruker Material Angular (fra Angular Material). Eksemplene på nettsiden virker litt for kompliserte, og alle andre opplæringer på internett virker enten utdaterte eller bruker AngularJS i stedet. Hvordan kan jeg vise en enkel varsling (akkurat som Android sin AlertDialog) med en tittel, en melding og en bekreft/avbryt-knapp?

Svar #1

REDIGER:

Du kan også bruke en malreferanse i komponentens HTML-fil (eller mer vanlig kjent som en «komponentvisning») og deretter referere til den i komponentens TypeScript-fil, og deretter sende den referansen til MatDialog#open.

Alternativt kan du få tilgang til en referanse til malen i komponentens visning, og deretter sende den til en metode du har definert som godtar referansen.

Hvis du er forvirret over det jeg nettopp skrev, sjekk koden nedenfor (den første dialogen viser den første setningen og den andre dialogen viser det jeg forklarte i den andre setningen)

(Antar følgende struktur igjen)

app/
  app.component.html
  app.component.ts

app.component.html:

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog in code</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

app.component.ts (forkortet):

import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

  openOtherDialog() {
    this.dialog.open(this.secondDialog);
  }
}

Denne metoden kan spare deg for litt bryderi med å lage nye komponenter bare for dialoger, samt å deklarere dem i modulens entryComponents.

Dette kan imidlertid raskt bli problematisk hvis du har flere dialogmaler i en enkelt komponentvisning.

Opprinnelig svar

Her er et enkelt eksempel som du ba om:

(Med forutsetning av følgende struktur)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html
<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Forklaring av koden ovenfor:

  • [matDialogTitle]/[mat-dialog-title]: En direktiv (vanligvis brukt på et h2-element) for å indikere dialogens tittel.
  • [matDialogContent]/[mat-dialog-content]/mat-dialog-content: En direktiv som angir dialogens innhold.
  • [matDialogActions]/[mat-dialog-actions]/mat-dialog-actions: En direktiv som angir dialogens handling(er).
  • [matDialogClose]/[mat-dialog-close]: En direktiv (vanligvis brukt på et button-element) som indikerer at dette elementet, når det klikkes på, skal lukke dialogen. Valgfritt kan denne direktiven inkludere en parameter (av any-type) som deretter kan sendes til komponenten som åpnet denne dialogen.
my-alert-dialog.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-alert-dialog', // Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts (redigert)

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts (redigert)

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
    MyAlertDialogComponent
  ]
})
export class AppModule { }

Demo

Svar #2

Jeg hadde brukt en søt varsling. https://www.freakyjolly.com/angular-sweetalert2-tutorial/#.X2nNxmgzZPY

Det er den enkleste og raskeste metoden for å lage varsler i Angular.

npm install --save sweetalert2

Bruk import Swal from 'sweetalert2'; i TS-filen din sammen med varselet Swal.fire('Dette er et enkelt og søtt varsel')

Relaterte artikler