Question

我想要使用ng bootstrap功能注入模态窗口的组件，所以我已经将应用程序中导入的模块也添加到了入口点，如ng-bootstrap docs中所建议的那样给我带来了一点困难。什么是正确的方法基本上我从现有组件调用模态和组件内容应加载到模态窗口。任何帮助将不胜感激。

modal.component.ts

import {Component, Input} from '@angular/core';

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

detail.component.ts

import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '@angular/core';
import {NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

  @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent implements OnChanges{

constructor(private detailService: DetailService,private ngbModal: NgbModal) {};

onClick(evt){
     const modalRef = this.ngbModal.open(Component);

   }
}

detail.component.html

<div class="card card-outline-info">
  <div class="card-header bg-info"><h5>Detail</h5><button (click)="onClick($event)"></button></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>

app.module.ts

import { NgbModule,NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './NgModal/modal.component';


@NgModule({
  declarations: [
    AppComponent,
    StreamComponent,
    SearchComponent,
    DetailComponent,
    SlaChartComponent,
     NgbdModalContent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
    ChartsModule,
    BrowserAnimationsModule,
     NgbModule.forRoot()

  ],
  providers: [StreamService,DatePipe,
              SearchService,
              DetailService,
              ChartService,AuthService,NgbActiveModal,
            {provide: HTTP_INTERCEPTORS,
            useClass: TokenInterceptor,
            multi: true}],
  entryComponents: [NgbdModalContent,DetailComponent],
  bootstrap: [AppComponent]
})

Answer 1

试试这个，我不是你的modal.component.ts文件的粉丝所以废弃它并从app.module.ts中删除NgbdModalContent

yourModal.component.html

.MyBlog-menu{
    display: flex;
    align-items: center;
    flex:1;
    justify-content: center;
    background-color: #98eebc;
    opacity:0.7;
    filter:alpha(opacity=70);
    border-radius: 4px;
    position: relative;
 height: 40px;
}
.MyBlog-menu ul{
    display: flex;
    justify-content: space-between;
    flex:0.33;
    list-style: none;
}
.MyBlog-menu ul li {
border-radius: 7px}

.MyBlog-menu ul li a{
    text-decoration: none;
    color: #4c4c4c;
}

yourModal.component.ts

<ng-template #theModal let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 *ngIf="type == 0" class="modal-title">Header</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
  <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
        <button type="button" id="cancel-edit-btn" class="btn btn-primary" (click)="c('Close click')">Cancel</button>
    </div>
</ng-template>

detail.component.html

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, ElementRef, Renderer2 } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-custom-modal',
  templateUrl: './yourModal.component.html',
  styleUrls: ['./yourModal.component.scss']
})
export class EditNotesComponent implements OnInit {
  @Input() name: string;
  @ViewChild('theModal') theModal: ElementRef;

  constructor(private modalService: NgbModal) {}

  ngOnInit() {
  }

  showModal() {
    this.modalService.open(this.theModal, { size: 'sm', backdrop: 'static'});
  }

}

detail.component.ts

<div class="card card-outline-info">
  <div class="card-header bg-info"><h5>Detail</h5><button (click)="yourCustomModal.showModal()"></button></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>
<app-custom-modal #yourCustomModal [name]="name"></app-custom-modal>

如何将组件内容打开到bootstrap模式？

1 个答案: