2017-06-16 82 views
6

我有使用Angular路由器的Angular 4 SPA應用程序。 我想要使用Bootstrap 4打開新對話框中的組件的超鏈接。我已經知道如何從函數打開模式對話框。Angular 4路由器和模式對話框

但如何使用超鏈接打開它?

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

我想離開我當前的組件,只是在它前面顯示模態對話框。

另一個問題 - 是否有可能以編程方式做到這一點?所以,我可以

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

和登錄模式對話框顯示在當前組件?

有什麼建議嗎?

回答

6

我最好的猜測是你可能想要訂閱激活的路線並更改路線中的參數來觸發模態。

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

+0

謝謝你的建議。什麼組件將映射到「/ yourroute」?它會是Cmpl嗎? – Sergey

+0

這聽起來像你真的只想改變路線參數而不是路線本身......我以前沒有這樣做,但你可以看看這個[鏈接](https://stackoverflow.com/questions/40283562/如何對變化僅-PARAMS-的路由功能於angular2) – birwin