Angular 4路由器和模态对话框

Question

我有一个使用 Angular 路由器的 Angular 4 SPA 应用程序。我想要使​​用 Bootstrap 4 在新对话框中打开组件的超链接。我已经知道如何从函数打开模态对话框。

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

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

我想保留我当前的组件，只在它前面显示模态对话框。

另一个问题 - 是否可以通过编程方式做到这一点？这样我就可以

this.router.navigate(['/login']);

并且登录模式对话框显示在当前组件上？

有什么建议吗？

Answer 1

我最好的猜测是您可能想要订阅激活的路由并更改路由中的参数以触发模态。

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
            }
        });
    }
}

我相信您会有一个看起来像这样的链接: <a [routerLink]="['/yourroute', {modal: 'true'}]">

可以在此处找到更好的示例:Route Blog