我正在使用Material Angular(来自Angular Material)。该网站中的示例看起来有些过于复杂,互联网上的其他教程似乎要么过时,要么使用AngularJS。我该如何使用标题、消息和确认/取消按钮显示简单的警报(就像Android的AlertDialog)?
我正在使用Material Angular(来自Angular Material)。该网站中的示例看起来有些过于复杂,互联网上的其他教程似乎要么过时,要么使用AngularJS。我该如何使用标题、消息和确认/取消按钮显示简单的警报(就像Android的AlertDialog)?
编辑:
您还可以在组件的HTML文件中使用模板引用(通常称为"组件视图"),然后在组件的TypeScript文件中引用它,再将该引用传递给MatDialog#open
。
或者,您可以在组件的视图中访问模板的引用,并将其传递给您定义的接受此引用的方法。
如果您对我刚刚输入的内容感到困惑,请查看下面的代码(第一个对话框演示了第一句话,第二个对话框展示了我在第二句话中解释的内容)
(再次假设以下结构)
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
(缩写):
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);
}
}
使用此方法可以避免为对话框创建新组件以及在模块的entryComponents
中声明它们而产生的一些麻烦。
然而,如果在单个组件视图中有多个对话框模板,则这可能很快变得麻烦。
原始回答
以下是您请求的一个简单示例:
(假设以下结构)
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>
以上代码的解释如下:
[matDialogTitle]
/ [mat-dialog-title]
:指令(通常用于 h2
元素),用于指示对话框的标题。[matDialogContent]
/ [mat-dialog-content]
/ mat-dialog-content
:指令,表示对话框的内容。[matDialogActions]
/ [mat-dialog-actions]
/ mat-dialog-actions
:指令,表示对话框的操作。[matDialogClose]
/ [mat-dialog-close]
:指令(通常用于 button
元素),表示当点击此元素时应关闭对话框。可选地,此指令可以包括一个参数(任意类型),然后将该参数传递给打开此对话框的组件。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
(redacted)
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 { }
MatDialog#open
。 - EdricdialogMsg
?我只能将字符串传递给正文。 - timthekoder$ npm install --save sweetalert2
在您的TS文件中使用import Swal from 'sweetalert2';
与警告框一起Swal.fire('This is a simple and sweet alert')
npm i @angular/material
,为dialog
添加component
,例如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
}
}
SourceComponent
打开EmployeeDialog
,每当调用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 { }