Question

我有一个ngx引导程序模式，该模式当前有效，并打开“详细信息列表”页面，其中包含我的所有列表的特定数据。但是，我想使用路由，以便可以通过直接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 { }

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

ngx引导程序通过路由打开模式

1 个答案: