导航后未关闭“角度材质"对话框 [英] Angular Material Dialog not closing after navigation

问题描述

我正在开发一个显示数据表中的实体概述的应用程序.每个实体都有链接的实体，这些实体在列中显示为"xxx链接的实体".当用户单击该列的值时，将打开一个材质对话框，显示链接实体的列表.这些都是到其他实体的链接.单击这些链接之一后，将显示该实体的正确页面，但该对话框不会关闭.使用后退"按钮时，我确实关闭.我正在使用closeOnNavigation属性.

I'm working on an application that shows an overview of entities in a datatable. Every entity has linked entities that are shown as 'xxx linked entities' in a column. When the user clicks on the value of that column, a material dialog opens showing the list of the linked entities. These are all links to other entities. Upon clicking one of these links, the correct page of the entity is shown, but the dialog doesn't close. I does close when using the back button. I am using the closeOnNavigation property.

一些示例代码:

在我的主要组件中:

public openDialog(entity: Entity) {
    const dialogRef = this.dialog.open(EntityDialogComponent, {
        closeOnNavigation: true,
        data: {
            entity,
            otherEntities: this.getNameOfOtherEntities(),
        },
    });
}

对话框的HTML

<h1 mat-dialog-title>Linked {{otherEntities}}:</h1>
<mat-dialog-content>
<mat-list role="list">
    <mat-list-item role="listitem" *ngFor="let linkedEntity of entity.getProperty('linkedEntities')">
       <a class="m-link m--font-bold" [routerLink]="['/reporting/' + otherEntities, linkedEntity.id]">{{linkedEntity.name}}</a>
    </mat-list-item>
</mat-list>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button (click)="cancel()">Close</button>
</mat-dialog-actions>

对话框组件:

@Component({
    selector: "entity-dialog",
    templateUrl: "entity-dialog.component.html",
})
export class EntityDialogComponent {

    public entity: Entity;
    public otherEntities: string;

    constructor(
        public dialogRef: MatDialogRef<EntityDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: IDialogData,
    ) {
        this.entity = data.entity;
        this.otherEntities = data.otherEntities;
    }

    public cancel(): void {
        this.dialogRef.close();
    }

}

在旁注:

当我在特定实体页面上时，当我单击数据表以打开模式并单击指向另一个实体的链接时，页面将滚动到顶部，浏览器中的链接会更改为正确的链接，但是由于某些原因，页面没有刷新. 有什么想法吗?

When I'm on a specific entity page, and I click in a datatable to open a modal and click a link to another entity, the page scrolls to the top, the link in the browser changes to the correct link, but the page doesn't get refreshed for some reason. Any ideas?

推荐答案

您好，根据它说的文档:closeOnNavigation:当用户向后/向前浏览历史记录时，对话框是否应该关闭.

Hi according to the docs it says: closeOnNavigation: Whether the dialog should close when the user goes backwards/forwards in history.

历史记录导航通常表示浏览器的后退和前进按钮: https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

History Navigation Normally means browser back and forward buttons: https://developer.mozilla.org/en-US/docs/Web/API/History_API

在这种情况下，您可以做的是创建一个函数，该函数将在对话框关闭后进行路由，而不是直接从html路由，因此您可以确保在启动导航之前先关闭对话框.

What you could do in your scenario however is instead of routing directly from your html is create a function that will route after the dialog is closed this way you can ensure that you close the dialog first before initiating your navigation.

   <a class="m-link m--font-bold" (mousedown)="navigateToEntity($event)">{{linkedEntity.name}}</a>

内部组件类似

  navigateToEntity(event) {
    this.dialogRef.afterClosed.pipe(
      tap(() => this.router.navigate(['navigate to wherever'])),
      first()
    ).subscribe();
    this.dialogRef.close();
  }

希望这会有所帮助，我与Material Components并没有太多合作，但是通读了一些文档，这就是我将如何实现它.

Hope this helps, i haven't worked much with Material Components but reading through some of the docs this is how i would implement it.

让我知道这是否有帮助！

Let me know if this helped!

这篇关于导航后未关闭“角度材质"对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！