Бутстрап модальный для Angular 6 - PullRequest
Новая
       23

Бутстрап модальный для Angular 6

0 голосов
/ 31 декабря 2018

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

import { Component } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-confirm',
  template: `
  <div class="modal-header">
    <h4 class="modal-title" id="modal-title">Profile deletion</h4>
    <button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
    <p>All information associated to this user profile will be permanently deleted.
    <span class="text-danger">This operation can not be undone.</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel click')">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button>
  </div>
  `
})
export class NgbdModalConfirm {
  constructor(public modal: NgbActiveModal) {}
}

Я использую этот блок подтверждения внутри класса, как показано ниже: 

export class NgbdModalFocus {
  constructor(private _modalService: NgbModal) {}

  open(name: string) {
    this._modalService.open(NgbdModalConfirm);
  }
}

Я хочу, если пользователь нажал кнопку ОК, а затем внутри NgbdModalFocus вызвалсобытие, чтобы сделать что-то.Кстати, я не уверен, правильно ли запускает событие или что-то еще.Главное, чтобы я хотел, чтобы работа выполнялась во втором классе, нажав кнопку «ОК» в окне подтверждения.

1 Ответ

0 голосов
/ 02 января 2019

Важно, чтобы вы импортировали ngb-bootstrap в ваш app.module.ts: 

/* ngb bootstrap */
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    AuthModule.forRoot(),

    NgbModule.forRoot(),

    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'autologin', component: AutoLoginComponent },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],

Вот ссылка с примером внедрения: https://www.thetechieshouse.com/angular-4-bootstrap-modal-popup/

...