要实现Angular Material弹出窗口可以移动到第二个监视器屏幕,可以使用以下步骤:
npm install --save @angular/material @angular/cdk
app.module.ts
文件中,添加以下导入语句:import { DragDropModule } from '@angular/cdk/drag-drop';
import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
imports
数组中:imports: [
// other imports
DragDropModule,
OverlayModule,
PortalModule,
MatIconModule,
MatButtonModule,
MatDialogModule
]
dialog.component
的组件:ng generate component dialog
dialog.component.ts
文件中,添加以下代码:import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
}
dialog.component.html
文件中,添加以下代码:
app.component.ts
文件中,添加以下代码来打开弹出窗口:import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) { }
openDialog() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '400px',
height: '300px',
position: {
top: '50px',
left: '50px'
}
});
}
}
app.component.html
文件中,添加以下代码来调用打开弹出窗口的方法:
通过以上步骤,您现在应该能够使用Angular Material创建一个弹出窗口,并设置它的位置使其移动到第二个监视器屏幕。您可以根据需要调整弹出窗口的宽度、高度和位置。