ngx бутстрап открыть модал через маршрутизацию - PullRequest
Новая
       12

ngx бутстрап открыть модал через маршрутизацию

0 голосов
/ 29 августа 2018

У меня есть модальный загрузчик ngx, который в настоящее время работает и открывает страницу со списком деталей с конкретными данными для каждого из моих листингов. Тем не менее, я хотел бы использовать маршрутизацию, чтобы мой модал листинга можно было открыть по прямой ссылке и заполнить списком конкретных деталей на основе его идентификатора. Например ... / Listings / перечисление / 50 откроет модальный листинг и будет заполнен данными для перечисления с идентификатором 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

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете использовать стандартную модальность начальной загрузки в этом сценарии. Добавьте модальную разметку к вашему компоненту и затем загрузите его через маршрутизацию. Я добавил класс "show" в модальный режим, чтобы он сразу отображался. Убедитесь, что у вас есть роутер-выход на родительском компоненте. Вот демонстрация 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 { }

Я не включил параметры в демонстрационную версию, но вы можете легко наблюдать их в модальном режиме и затем выполнять любые необходимые вызовы службы для заполнения модального режима. Я использую этот метод во многих местах своих приложений.

...