Angular Material Dialog not closing after navigation

问题

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.

Some example code:

In my main component:

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

Html of the dialog:

<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>

Dialog component:

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

}

On the side note:

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?

回答1:

When you navigate using [routerLink] directive or router.navigate() method of Angular's Router service within the MatDialog, the actual navigation happens. So we can just listen for router's changes and close the dialog.

In your EntityDialogComponent implement ngOnInit as following:

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

The code above closes a dialogRef when NavigationStart event is fired and there is an instance of the dialogRef.

P.S. Make sure that the _routerSubscription is unsunscribed.

回答2:

I had this problem and I just fixed it now.

you need to subscribe router events after creating the dialogRef object. you can check the code

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

回答3:

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

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

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>

Inside your component have something like

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

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!

回答4:

There were no errors or warnings but closeOnNavigation: true started working for me only after adding these providers to the module with the dialog:

import { Location, LocationStrategy, PathLocationStrategy, APP_BASE_HREF } from "@angular/common";

...
    providers: [
        Location,
        { provide: LocationStrategy, useClass: PathLocationStrategy },
        { provide: APP_BASE_HREF, useValue: '/' }
    ]
...

I suspect that in my case this was because of using UI-Router and never initializing the built in Angular router before.

来源：https://stackoverflow.com/questions/51821766/angular-material-dialog-not-closing-after-navigation