会弹出mat-dialog并将页面导航回应用程序的默认路径

我正在尝试在当前页面上弹出一个垫子对话框，但是当我单击按钮以弹出对话框时，该对话框会出现，但随后导航到默认路线，而不是停留在同一页面上.对话框仍然显示.

I am trying to pop up a mat dialog box on my current page but when I click the button to pop up the dialog, the dialog comes up but then navigates to default route instead of staying on same page. The dialog box is still shown.

这是我的路由器模块:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  { path: 'main-nav', component: MainNavComponent, children: [
      { path: 'create-service', component: CreateServiceComponent },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'designations', component: DesignationsComponent, children: [
          { path: 'dialog', component: AddDesignationsComponent }
        ]
      },
    ] 
  }
];

我试图在DesignationsComponent下弹出AddDesignationsComponent，将其作为按钮单击时的对话框对话框，但会弹出并导航页面到HomeComponent.我想我的错误来自我的路由模式，但我似乎无法弄清楚.

I am trying to pop up the AddDesignationsComponent under DesignationsComponent as a mat-dialog box on button click but instead it pops up and navigates the page to the HomeComponent. I guess my error is coming from my routing pattern but I can't seem to figure it out.

我的DesignationsComponent ts:

My DesignationsComponent ts:

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { AddDesignationsComponent } from '../add-designations/add-designations.component';

@Component({
  selector: 'app-designations',
  templateUrl: './designations.component.html',
  styleUrls: ['./designations.component.css']
})
export class DesignationsComponent implements OnInit {

  constructor(
    private dialog: MatDialog
  ) { }

  openDialog() {
    this.dialog.open(AddDesignationsComponent);
  }

  ngOnInit() {
  }

}

DesignationsComponent Html:

DesignationsComponent Html:

<button mat-raised-button routerLink='' id="design-btn" (click)='openDialog()'>
   <mat-icon>add</mat-icon>Add a new Designation
</button>

我正在将DesignationComponent作为router-outlet的子项加载到MainNavComponent下的DesignationComponent.我注意到当我在app.component.html中从router-outlet更改为app-designations时，代码可以正常工作，但是当我开始使用router-outlet时，代码再次失败.我已经尝试给HomeComponent设置路径，但这一次，尽管对话框仍然显示，但显示了一个空白页 我哪里可能出问题了.谢谢.

I am loading the DesignationComponent under the MainNavComponent as a child with the router-outlet. I noticed the code works correctly when i change from router-outlet to app-designations in my app.component.html but fails again when i start using router-outlet. I already tried giving the HomeComponent a path, but this time, an empty page is shown though the dialog box still shows up Where could I be going wrong. Thanks.