ngx bootstrap通过路由打开模态

Question

我有一个ngx bootstrap模式，当前有效，并打开一个Details Listing页面，其中包含我的每个列表的特定数据。但是我想使用路由，以便我的列表模式可以通过直接URL打开，并根据它的id填充列出特定的详细信息。例如...... / listings / listing / 50将打开列表模态并填充列表ID 50的详细信息。

我现在甚至无法通过直接网址打开任何模态。

目前我正在点击链接打开每个模态

<a (click)="openDetailsModal(listing)" ...

和我的ListingService

  openDetailsModal(listing: Listing): void {
    this.selectedListing = listing;
    this.bsModalRef = this.modalService.show(ListingDetailComponent, {class:'listingDetailModal'});
    this.bsModalRef.content.listing = this.selectedListing;
  }

此外，我目前正在使用HttpClient从我的数据库中获取所有列表

Answer 1

您可以在此方案中使用标准引导模式。将模态标记添加到组件，然后通过路由加载它。我已经将“show”类添加到模态中，以便它立即显示。确保父组件上有路由器插座。 Here is a demo on Stackblitz。

您的列表模式组件如下所示：

import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'listing-dialog',
    template: `
    <div id="backdrop" class="modal-backdrop fade" [ngClass]="{ show: showModal }"></div>
    <div class="modal d-block fade" 
      [ngClass]="{ show: showModal }"
      (click)="onClose()"
      id="listing-dialog" 
      tabindex="-1" role="dialog" aria-labelledby="modalIdLabel">
        <div class="modal-dialog" role="document" (click)="onDialogClick($event)">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>I was loaded via route</h5>
                    <button type="button"
                        class="close"
                        (click)="onClose()"
                        aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                  <p>Add some detail here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" (click)="onClose()">Close</button>
                </div>
            </div>
        </div>
    </div>
    `
})
export class ListingDialogComponent implements AfterViewInit {

    showModal = false;

    constructor(private router: Router) { }

    ngAfterViewInit() {
      this.showModal = true;
    }

    onClose() {
      this.showModal = false;
      //Allow fade out animation to play before navigating back
      setTimeout(
        () => this.router.navigate(['..']),
        100
      );
    }

    onDialogClick(event: UIEvent) {
      // Capture click on dialog and prevent it from bubbling to the modal background.
      event.stopPropagation();
      event.cancelBubble = true;
    }
}

您的托管组件将具有以下内容：

<a [routerLink]="['listing']" >Load Listing</a>
<router-outlet></router-outlet>

该模块需要注册路线：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ListingDialogComponent } from './listing-dialog.component';

const routes: Routes = [
  { path: 'listing', component: ListingDialogComponent }
]

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, HelloComponent, ListingDialogComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我没有在演示中包含参数，但您可以在模态中轻松观察它们，然后执行任何必要的服务调用来填充模态。我在我的应用程序的许多地方使用此方法。