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'}]">

可以在这里找到更好的例子:路线博客