时间戳

首页 > 解决方案 > ngx bootstrap 通过路由打开模式

angular - ngx bootstrap 通过路由打开模式

问题描述

我有一个 ngx 引导模式，目前可以工作，并打开一个详细列表页面，其中包含我的每个列表的特定数据。但是，我想使用路由，以便可以通过直接 url 打开我的列表模式，并根据它的 id 填充列表特定的详细信息。例如 .../listings/listing/50 将打开列表模式并填充列表 id 50 的详细信息。

目前我什至无法通过直接 url 打开任何模式。

目前我通过点击链接打开每个模式

<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 从我的数据库中获取我的所有列表

标签： angularangular-routingngx-bootstrapngx-bootstrap-modal

解决方案

在这种情况下，您可以使用标准引导模式。将模态标记添加到您的组件，然后通过路由加载它。我已将“显示”类添加到模式中，以便它立即显示。确保您的父组件上有一个路由器插座。 这是 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 { }

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

推荐阅读