Question

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

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);
  }
}

我希望用户按下ok按钮，然后在NgbdModalFocus内部触发事件以执行某项操作。顺便说一下，我不确定是否正确的方式触发事件或其他任何事情。最主要的是我希望通过单击确认框上的“确定”按钮在第二堂课中完成这项工作。

Answer 1

重要的是，将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/

Angular 6的自举模态

1 个答案: