Угловой 2+ нг-бутстрап модальный мини Html - PullRequest
Новая
       38

Угловой 2+ нг-бутстрап модальный мини Html

0 голосов
/ 10 октября 2018

Хорошо, мой модал настроен так.Пожалуйста, помните, что я работаю в библиотеке компонентов, а не только в приложении.

Внутри моей библиотеки компонентов ...

У меня есть шаблон 

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

Я импортирую свой компонент в модуль приложения import {msModalModule} из 'ms-component';

Я добавляю 'msModalModule' в массив импорта @NgModule, а также добавляю компонент, на который ссылается модуль, в entryComponents 

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

Теперь в моем app.component.ts я добавляю функцию для управления открытием модального окна и передаю входные значения 

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;


 }

Таким образом, вместо простой передачи строковых значений я хотел бы передать / отобразить HTML и элементы управления в refModal, чтобы сделать его более полезным ... Я слышал о "включении" для этого, но нашел только примеры AngularJS...это правильно?какие-нибудь другие идеи?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Не похоже, что вы можете передавать элементы управления формы модальному ng-bootstrap.

Однако я изменил свое "модальное тело", чтобы можно было передавать текст или 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>
0 голосов
/ 10 октября 2018

Если вы просто хотите иметь часть тела в виде 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>
...