在Material Angular

Question

我正在使用Material Angular（来自Angular Material）。该网站中的示例似乎有点过于复杂，互联网上的其他所有教程似乎都已过时或者使用AngularJS。如何通过标题，消息和确认/取消按钮显示简单警报（就像Android的AlertDialog一样）？

Answer 1

以下是您提出的一个简单示例：

（假设以下结构）

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>

[matDialogTitle]

上述代码的说明：

• [mat-dialog-title] / h2：指示对话框标题的指令（通常用于[matDialogContent]元素）。
• [mat-dialog-content] / mat-dialog-content / [matDialogActions]：指示对话框内容的指示。
• [mat-dialog-actions] / mat-dialog-actions / [matDialogClose]：指示对话框操作的指示。
• [mat-dialog-close] / button：一个指令（通常用于any元素），指示单击此元素时应该关闭对话框。可选地，该指令可以包含一个参数（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

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

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 { } （编辑）

NoClassDefFoundError

Demo

Answer 2

我使用了一个很好的警报。 https://www.freakyjolly.com/angular-sweetalert2-tutorial/#.X2nNxmgzZPY

这是按角度创建警报的最简单，最快捷的方法。

$ npm install --save sweetalert2

在TS文件中将import Swal from 'sweetalert2';与警报Swal.fire('This is a simple and sweet alert')一起使用

Answer 3

安装npm i @angular/material，为component添加dialog，例如EmployeeDialog。

假设您还希望对话框中的table也位于右上角close button。

EmployeeDialog.html文件代码

<div md-dialog-content>
<!-- This button to close dialog -->
<button class="close" mat-button (click)="onNoClick()">
 <mat-icon>close</mat-icon>
 
</button>   
<div>   
 <table>
   <th>Id</th><th>Name</th>Addess<th></th><
   <tr *ngFor="let emp of emplyee; let i = index" border="1">
     <td>{{emp.DeviceID}}</td>
     <td>{{emp.FriendlyName}}</td>
   </tr>
 </table>   
</div>   
</div>

您的EmployeeDialog.ts文件应为

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class EmployeeDialog implements OnInit {

  constructor(public dialogRef: MatDialogRef<EmployeeDialog>, @Inject(MAT_DIALOG_DATA) public data: any){ }
  
  //write code to handle close
  }
}

现在，如果您想从EmployeeDialog打开SourceComponent，则无论何时Employeelist()函数调用您diaglog都会打开

SourceComponent.ts文件

public Employeelist()
{
    const dialogRef = this.dialog.open(EmployeeDialog, {
    width: '80%',
    height:'80%',
    panelClass: 'my-dialog',
    disableClose: true ,
    data: employeeList
  });
}

app.module.ts文件中的代码

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeDialog,
    SourceComponent,
  ],
  imports: [
    MatDialogModule,
    MatButtonModule,
    BrowserModule,
  ],
  entryComponents: [EmployeeDialog],
  bootstrap: [ AppComponent ],
  providers: []
})
export class AppModule { }