Question

我正在使用角度材质https://material.angular.io/components/dialog/overview，我的对话框按预期工作。唯一的麻烦是它在页面中间打开作为默认位置。我的要求是能够在我点击的链接旁边打开它。

表中显示此对话框的图标的当前代码如下：

HTML

<table>
 <tr *ngFor="let opty of optys" class="fa-table-data-row">
                    <td class="fa-table-data-col fa-text-link" (click)="createTab(opty.name)">{{opty.name}}</td>
                    <td class="fa-table-data-col">{{opty.account}}</td>
                    <td class="fa-table-data-col">{{opty.winPct}}&nbsp;
                          <mat-icon class="fa-icon"  *ngIf="highGap(opty.winPct, opty.aiWinPct) == true" (click)="openWinPctDialog(opty.name, opty.winPct, opty.aiWinPct)">warning</mat-icon></td>
                     <td class="fa-table-data-col" *ngIf="opty.recommendedAction != undefined">{{opty.recommendedAction[0].title}}</td>
</tr><table>

.TS

 openWinPctDialog(optyName:string, winPct:string, aiWinPct:string){
    this.winPctDialog.open(WinPctComponent,
                            {  width: "300px",
                               data: { name: optyName, winPct: winPct,  aiWinPct: aiWinPct}
                            })
  }

Answer 1

下面使用clientX和clientY设置坐标应该会有所帮助。

openEditDialog(evt: MouseEvent) {
const target = new ElementRef(evt.currentTarget);
    const dialogRef = this.dialog.open(ContentWindow, {
        position: {left:  **evt.clientX +'px'**  , top: **evt.clientY +'px'** }
  });

关于opnening元素的对话的角度材料位置

1 个答案: