Question

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

这是我的路由器模块：

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 }
        ]
      },
    ] 
  }
];

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

我的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：

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

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

Answer 1

您正在一起使用routerLink指令和(click)事件。导致有问题的行为。 (click)='openDialog()'打开对话框，routerLink=''导致您的应用路由到空路由。

只需移除routerLink=''，就可以了。

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

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

1 个答案: