Angular 2+ ng-bootstrap 模态传递 Html答案

【问题标题】：Angular 2+ ng-bootstrap modal pass HtmlAngular 2+ ng-bootstrap 模态传递 Html
【发布时间】：2019-03-15 20:00:19
【问题描述】：

好的，我的模态设置是这样的。请记住，我在组件库中工作，而不仅仅是应用程序。

在我的组件库中...

我有我的模板

 <div class="modal-header">
     <h4 class="mt-3">
        {{header}}
     </h4>
     <button id="messageModalClose" type="button" class="close" aria- 
      label="Close" 
         (click)="closeModal()">
         <span aria-hidden="true">&times;</span>
     </button>
  </div>
  <div class="modal-body">
      {{message}}
  </div>

和组件

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

@Component({
  selector: 'ms-modal',
  templateUrl: './ms-modal.component.html',
  styleUrls: ['./ms-modal.component.scss'],
  //encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
  @Input() header: string;
  @Input() message:string;

  private _modalOptions: NgbModalOptions = {
    backdrop: 'static',
    keyboard: false,
    size: 'lg',
    centered: true
  };


  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {

  }
  closeModal() {
    this.activeModal.close();
  }
}

我将组件导入到我的应用模块中 从“ms-components”导入 {msModalModule}；

我将“msModalModule”添加到 @NgModule 导入数组并添加组件被模块引用到 entryComponents

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     FormsModule,
     msModalModule    
  ],
bootstrap: [AppComponent],
entryComponents:[MsModalComponent]
})
export class AppModule {}

现在在我的 app.component.ts 中添加一个函数来处理打开 Modal 并传入输入值

OpenModal(header,message){

***NgbModalOptions is optional
const modalOptions: NgbModalOptions = {
  backdrop: 'static',
  keyboard: false,
  size: 'lg',
  centered: true,
};


 const modalRef = this.modalService.open(MsModalComponent,modalOptions)
 modalRef.componentInstance.header = header;
 modalRef.componentInstance.message = message;


 }

因此，我想在 refModal 中传递/显示 HTML 和控件以使其更有用，而不是仅仅传递字符串值……我听说过“嵌入”，但只找到 AngularJS 示例……是这个权利？还有其他想法吗？

【问题讨论】：

标签： angular angular-components ng-bootstrap angular-library

【解决方案1】：

如果您只是希望将正文部分作为 html。你可以使用<ng-content></ng-content>

<div class="modal-header">
     <h4 class="mt-3">
        {{header}}
     </h4>
     <button id="messageModalClose" type="button" class="close" aria- 
      label="Close" 
         (click)="closeModal()">
         <span aria-hidden="true">&times;</span>
     </button>
  </div>
  <div class="modal-body">
      <ng-content></ng-content>
  </div>

模态组件的使用

<ms-modal><h1> This is modal content area </h1></ms-modal>

【讨论】：

如何在上面的“modalRef”中使用它？

【解决方案2】：

看起来你不能将表单控件传递给 ng-bootstrap modal。

不过，我确实更改了我的“modal-body”，以便可以传递文本或 HTML。这只会解释像（粗体）这样的html样式标签作为一个例子......它不会解释像或这样的控制标签

使用“innerHTML”就是这个样子。

        <div class="modal-header">
            <h4 class="mt-3">{{header}}
            </h4>
            <button id="messageModalClose" type="button" class="close" aria-label="Close" (click)="closeModal()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" [innerHTML]=message>

        </div>

【讨论】：