时间戳

首页 > 解决方案 > Angular 6 的引导模式

angular - Angular 6 的引导模式

问题描述

我有一个角度应用程序，我想使用引导模式作为确认框。我的确认框如下：

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 内部触发一个事件来做某事。顺便说一句，我不确定正确的方法是触发事件还是其他任何东西。主要的是我希望通过单击确认框上的确定按钮在第二堂课内完成这项工作。

标签： angularbootstrap-4angular-bootstrap

解决方案

将 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/

推荐阅读