mat-dialog 弹出并将页面导航回应用程序的默认路由 [英] mat-dialog pop up and navigates page back to the app's default route

问题描述

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

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 作为按钮单击时的 mat-dialog 框，但它会弹出并将页面导航到 家庭组件.我想我的错误来自我的路由模式，但我似乎无法弄清楚.

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>

我正在将 MainNavComponent 下的 DesignationComponent 作为带有 router-outlet 的子项加载.我注意到当我在 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.

推荐答案

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

you are using routerLink directive and (click) event together. that causes the problematic behavior. (click)='openDialog()' opens the dialog and routerLink='' causes your app to route to empty route.

只需删除 routerLink='' 就可以了.

just remove routerLink='' and you'll be fine.

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

这篇关于mat-dialog 弹出并将页面导航回应用程序的默认路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！