title: Angular Material Dialog not closing after navigation
body: <p>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 <code>closeOnNavigation</code> property.</p>
  
  <p>Some example code:</p>
  
  <p>In my main component:</p>
  
  <pre><code>public openDialog(entity: Entity) {
      const dialogRef = this.dialog.open(EntityDialogComponent, {
          closeOnNavigation: true,
          data: {
              entity,
              otherEntities: this.getNameOfOtherEntities(),
          },
      });
  }
  </code></pre>
  
  <p>Html of the dialog:</p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Linked {{otherEntities}}:&lt;/h1&gt;
  &lt;mat-dialog-content&gt;
  &lt;mat-list role="list"&gt;
      &lt;mat-list-item role="listitem" *ngFor="let linkedEntity of entity.getProperty('linkedEntities')"&gt;
         &lt;a class="m-link m--font-bold" [routerLink]="['/reporting/' + otherEntities, linkedEntity.id]"&gt;{{linkedEntity.name}}&lt;/a&gt;
      &lt;/mat-list-item&gt;
  &lt;/mat-list&gt;
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions&gt;
      &lt;button mat-button (click)="cancel()"&gt;Close&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  
  <p>Dialog component: </p>
  
  <pre><code>@Component({
      selector: "entity-dialog",
      templateUrl: "entity-dialog.component.html",
  })
  export class EntityDialogComponent {
  
      public entity: Entity;
      public otherEntities: string;
  
      constructor(
          public dialogRef: MatDialogRef&lt;EntityDialogComponent&gt;,
          @Inject(MAT_DIALOG_DATA) public data: IDialogData,
      ) {
          this.entity = data.entity;
          this.otherEntities = data.otherEntities;
      }
  
      public cancel(): void {
          this.dialogRef.close();
      }
  
  }
  </code></pre>
  
  <p>On the side note:</p>
  
  <p>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?</p>