如何将组件内容打开为引导模式？

Question

我有一些组件，我想使用ng bootstrap功能注入模态窗口，因此我已经将模块导入到应用程序中，并且按照ng-bootstrap文档中的建议将其添加到入口点中，这给我带来了很多麻烦。 什么是正确的方法，基本上我是从现有组件中调用模态，而组件内容应加载到模态窗口中。 任何帮助将不胜感激。

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

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

yourModal.component.ts

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.html

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

detail.component.ts

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

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

    })
export class DetailComponent implements OnChanges{
name: string;

constructor(private detailService: DetailService) {
this.name = 'John Doe';};

}