Angular 角度4路由器和模式对话框

我有使用Angular router的Angular 4 SPA应用程序。 我想有一个超链接，可以使用Bootstrap4在新对话框中打开一个组件。我已经知道如何从函数打开模态对话框

但是如何使用超链接打开它呢

<a [routerLink]="['/login']">Login</a>

当前组件上是否显示登录模式对话框

---

有什么建议吗？

我的猜测是，您可能希望订阅激活的路由，并更改路由中的参数以触发模式

import { ActivatedRoute, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'cmp1',
  templateUrl: './cmp1.component.html',
  styleUrls: ['./cmp1.component.css'],
})
export class Cmp1 implements OnInit {

    constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() {
        this.activatedRoute.params.subscribe(params => {
            if (params["modal"] == 'true') {
                // Launch Modal here
            }
        });
    }
}

我相信你会有这样一个链接：

---

您也可以使用一个路径，而不是上面使用查询参数的答案。此处详细讨论了这两个选项：


TL；博士：

创建一个仅在创建时打开模态的虚拟组件：

@Component({
  template: ''
})
export class LoginEntryComponent {
  constructor(public dialog: MatDialog, private router: Router,
    private route: ActivatedRoute) {
    this.openDialog();
  }
  openDialog(): void {
    const dialogRef = this.dialog.open(LoginComponent);
    dialogRef.afterClosed().subscribe(result => {
      this.router.navigate(['../'], { relativeTo: this.route });
    });
  }
}

然后将虚拟组件添加到管线中：

RouterModule.forRoot([
{
  path: 'home',
  component: BackgroundComponentForModal,
  children: [
    {
      path: 'dialog',
      component: LoginEntryComponent
    }
  ]
},
{ path: '**', redirectTo: 'home' }

])
谢谢您的建议。哪个组件将映射到“/yourroute”？是Cmpl吗？听起来你真的想改变路由参数而不是路由本身。。。我以前没有做过，但你可以看看这个
RouterModule.forRoot([
{
  path: 'home',
  component: BackgroundComponentForModal,
  children: [
    {
      path: 'dialog',
      component: LoginEntryComponent
    }
  ]
},
{ path: '**', redirectTo: 'home' }