Angular 2+ добавить ng-bootstrap Modal в библиотеку компонентов

Я работаю с ng-bootstrap, и я хотел бы добавить модальное окно для повторного использования в библиотеку компонентов, которую я создал.

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

<p>
<ng-template #messageModal let-closeModal="close('Cross click')">
    <div id="resultModal">
        <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>
    </div>

</ng-template>

</p>

и компонент

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions } 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(private modalService: NgbModal) { }

  ngOnInit() {
  }
  OpenModal(_messageModal) {
    this.modalService.open(_messageModal, this._modalOptions);
  }

}

Я добавил @Inputs для заголовка и сообщения Моя библиотека компонентов строится нормально

В моем приложении, в которое я импортирую свою библиотеку компонентов, я добавил модальный тег

<ms-modal *ngIf="showModal==true" [header]="header" [message]="message"> 
</ms-modal>

Когда я устанавливаю showModal=true, ничего не происходит.

showModal:any = false;

this.showModal = "true";

Я думаю, я не уверен, как правильно подключить это, чтобы использовать мой модальный модуль из моей библиотеки компонентов в моих различных приложениях.


angular angular-library angular-components angular-bootstrap
person Funn_Bobby    schedule 09.10.2018    source источник
comment
Можете ли вы показать, где вы установили showModal? Кроме того, в верхней части шаблона есть тег <p>. Он закрыт?   -  person Frank Modica    schedule 09.10.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно установить для showModal значение true, используя логическое значение, например:

this.showModal = true;

вместо того, чтобы устанавливать его строковым значением, как вы делали:

this.showModal = "true";

потому что ваш *ngIf="showModal==true" использует логическое значение true вместо строкового значения "true" для условного отображения вашего модального окна.

person Andre Knob    schedule 09.10.2018

arrow_upward
0
arrow_downward

Хорошо, у меня это работает, и у меня было несколько ошибок.

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

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

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

 <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 } from 'ms-components';

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

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

}) экспорт класса 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;

}

person Funn_Bobby    schedule 10.10.2018