Question

我正在申请Angular 5应用程序。我想做一个叠加过滤器。如果单击过滤器按钮，则扩展面板将在叠加字段中可见。如图所示。它基本上是一个扩展面板，但是扩展字段被覆盖。我试图像下面这样使用matDialog：

How can I position a dialog above the triggering button?

// Dialog Component

import { Component, ElementRef, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from 
'@angular/material';

@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class MyDialogComponent implements OnInit {
  private _matDialogRef: MatDialogRef<LocationFilterComponent>;
  private triggerElementRef: ElementRef;
  constructor(_matDialogRef: MatDialogRef<LocationFilterComponent>,
              @Inject(MAT_DIALOG_DATA) data: { trigger: ElementRef }) {
    this._matDialogRef = _matDialogRef;
    this.triggerElementRef = data.trigger;
  }

  ngOnInit() {
    const matDialogConfig: MatDialogConfig = new MatDialogConfig();
    const rect = this.triggerElementRef.nativeElement.getBoundingClientRect();
    matDialogConfig.position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
    matDialogConfig.width = '300px';
    matDialogConfig.height = '400px';
    this._matDialogRef.updateSize(matDialogConfig.width, matDialogConfig.height);
    this._matDialogRef.updatePosition(matDialogConfig.position);
  }
  cancel(): void {
    this._matDialogRef.close(null);
  }
}


// Call the dialog

onShowDialog(evt: MouseEvent): void {
  const target = new ElementRef(evt.currentTarget);
  const dialogRef = this._matDialog.open(MyDialogComponent, {
    data: { trigger: target }
  });
  dialogRef.afterClosed().subscribe( _res => {
    console.log(_res);
  });
}

但是它没有执行我想要的操作。该职位必须跟随选择的要素。并且在这种情况下，位置，宽度和高度是固定的。

关于如何使这项工作像图像一样的任何建议或解决方案？

Filter button

Filter button clicked with overlay field

角度叠加用于动态位置过滤

0 个答案: