导航后角度材质对话框未关闭

Question

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

一些示例代码：

在我的主要组件中：

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();
    }

}

旁注：

当我在特定实体页面上时，单击数据表以打开模态并单击指向另一个实体的链接，页面滚动到顶部，浏览器中的链接更改为正确的链接，但页面没有出于某种原因没有精神焕发。有任何想法吗？

Answer 1

当您在 MatDialog 中使用Angular 的路由器服务的[routerLink]指令或router.navigate()方法进行导航时，会发生实际的导航。所以我们可以只监听路由器的变化并关闭对话框。

在您的EntityDialogComponent实现 ngOnInit 中，如下所示：

ngOnInit() {
   this._routerSubscription = this._router.events
     .pipe(
       filter((event: RouterEvent) => event instanceof NavigationStart),
       filter(() => !!this.dialogRef)
     )
     .subscribe(() => {
       this.dialogRef.close();
     });
}

上面的代码关闭一个dialogRefwhenNavigationStart事件被触发并且有一个dialogRef.

PS 确保_routerSubscription是 unsunscribed。

Answer 2

您可以使用此matDialogClose属性。

<button mat-button matDialogClose>Cancel</button>

Answer 3

我遇到了这个问题，我现在刚刚修复了它。

创建 dialogRef 对象后，您需要订阅路由器事件。你可以检查代码

const dialogRef = this.dialog.open(MyComponent, {
  width: '380px',
  height: '320px',
});
this.router.events
 .subscribe(() => {
   dialogRef.close();
 });

Answer 4

您好，根据文档它说： closeOnNavigation：当用户在历史记录中后退/前进时对话框是否应该关闭。

历史导航通常指浏览器后退和前进按钮： https: //developer.mozilla.org/en-US/docs/Web/API/History_API

然而，在您的场景中，您可以做的不是直接从 html 进行路由，而是创建一个在对话框关闭后进行路由的函数，这样您就可以确保在开始导航之前先关闭对话框。

   <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();
  }

希望这会有所帮助，我没有太多使用材料组件的工作，但阅读了一些文档，这就是我实现它的方式。