Динамически меняйте шаблон для Angular 5 ng-bootstrap Modal Dialog

Question

Я работаю над модальным диалоговым окном, для которого мне нужно иметь возможность динамически менять templateURL. То, что показано, является шаблоном по умолчанию. Мне просто интересно, как этого добиться, так как это будет вызвано с передачей имени и местоположения templateURL. Ниже приведен код моего компонента:

import { ModalService } from './../../services/modal.service';
import {Component, Input} from '@angular/core';

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

@Component({
  selector: 'app-ngbd-modal-content',
  templateUrl: '../../templates/modal.tp1.html'
})

export class ModalOptionsComponent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal, modelService: ModalService) {}
}

export class  NgbdModalComponent {
  constructor(private ngbModal: NgbModal) {}
}

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

Modal.service.ts:

import { ModalOptionsComponent } from './../pages/modal-options/modal-options.component';
import { Injectable } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Injectable()
export class ModalService {

  constructor(private ngbModal: NgbModal, private modalComp: ModalOptionsComponent) { }

  modalService(modal: any) {
    const modalDefaults = {
      templateUrl: '../templates/modal.tp1.html'
    };
    const modalOptions = {
      hasClose: true,
      closeButtonText: 'CLose',
      actionButtonText: 'OK',
      headerText: 'Proceed?',
      bodyText: 'Perform this action?',
      okResult: {}
    };
  }

  showModal(customModalDefaults: any, cusomeModalOptions: any) {

  }


}

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

Answer 1

Поскольку я не могу найти возможность изменить templateUrl, мне нужно было создать компонент для каждого типа диалога, который мне был нужен. Недостатком этого было то, что он больше не был динамичным, но он соответствовал тому, для чего он мне нужен. И в основном вы можете использовать сервис для генерации типа необходимого компонента. К сожалению, использование динамической загрузки компонентов не было жизнеспособным решением из-за сложности его выполнения. Ниже приведен пример того, что я сделал.

Код компонента для модального диалогового окна по умолчанию:

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

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

@Component({
  selector: 'app-ngbd-modal-content',
  template: `
<div class="modal-header">
<h3 class="font-32" style="padding-bottom: 0px">{{headerText}}</h3>
</div>
<div class="modal-body">
<p>{{bodyText}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
  `,
  styleUrls: ['./default-modal-dialog.component.scss']
})
export class DefaultModalDialogComponent {
  @Input() bodyText;
  @Input() headerText;

  constructor(public activeModal: NgbActiveModal) {}

}

Код компонента для FeaturedSearch:

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

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

    @Component({
    selector: 'app-featured-search-dialog',
    template: `
    <div>
        <div class="modal-header">
            <h3 class="font-32" style="margin-bottom: -16px;">Edit Heading and Subheading</h3>
        </div>
        <div class="modal-body" style="padding:30px;">
            <div class="row">
                <div class="col-md-12">
                    <label class="font-14-bold">Heading</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <input style="box-shadow: rgb(102, 102, 102) 0px 0px 4px inset; border: 0px; margin-bottom: 50px;"  type="text" class="form-control input-sm" ng-model="modalOptions.okResult.heading" >
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="font-14-bold">Subheading</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <input style="box-shadow: rgb(102, 102, 102) 0px 0px 4px inset; border: 0px;" type="text" class="form-control input-sm" ng-model="modalOptions.okResult.subheading" >
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div style="margin-top: 8px; margin-bottom: 8px;">
                <button style="background-color: #999999; color: #ffffff;" type="button" ng-show="modalOptions.okResult.buttonText !== 'Close'"
                        class="btn font-14-bold"
                        data-ng-click="modalOptions.close()">Close
                </button>
                <button style="background-color: #004065; color: #ffffff; width: 70px;" type="button" class="btn ng-binding" ng-disabled="modalOptions.okResult.heading.length <= 0 || modalOptions.okResult.subheading.length <=0" data-ng-click="modalOptions.ok()">OK</button>
            </div>
        </div>
    </div>
    `,
    styleUrls: ['./featured-search-dialog.component.scss']
    })
    export class FeaturedSearchDialogComponent {

    @Input() heading;
    @Input() subheading;

    constructor(public activeModal: NgbActiveModal) {}

    }

Пользовательские модальные услуги:

import { Injectable, Input, ComponentFactoryResolver } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Injectable()
export class ModalService {
    constructor(private ngbModal: NgbModal,
                private componentFactoryResolver: ComponentFactoryResolver) {}

  showDefaultModalComponent(theComponent: any, headerText: any, bodyText: any) {
    const componenetFactory = this.componentFactoryResolver.resolveComponentFactory(theComponent);
    const modalRef = this.ngbModal.open(theComponent);
    modalRef.componentInstance.bodyText = bodyText;
    modalRef.componentInstance.headerText = headerText;
    return modalRef;
  }

  showFeaturedDialog(theComponent: any, heading: any, subheading: any) {
    const componenetFactory = this.componentFactoryResolver.resolveComponentFactory(theComponent);
    const modalRef = this.ngbModal.open(theComponent);
    return modalRef;
  }


}

Answer 2

Для начала: NgbModal, NgbActiveModal происходят из пакета '@ ng-bootstrap / ng-bootstrap'.

Я думаю, что вам не нужно создавать отдельный сервис, поскольку функция «динамического шаблона» может быть достигнута с помощью того, что предоставляет сам пакет. Посмотрим как:

См. Изображение ниже (я думаю, что это сценарий). В вашем основном компоненте, где вы поместили свой «default-modal», в моем случае это -detail (папка), модальный (default-modal) запускается из этого компонента ( -detail.component) .

Допустим, вы редактируете событие в * -detail.component нажатием кнопки. Этот щелчок вызывает всплывающее окно «default-modal». Давайте посмотрим на это в коде.

* -. Detail.component.html <button class="btn" (click)="editEvents(eventvalues)"> Edit </button>

* - detail.component.ts

editEvents(events) {
const activeModal = this.modalService.open(DefaultModal, { size: 'lg' });
activeModal.componentInstance.modalHeader = 'Edit Event';
activeModal.componentInstance.eventdata = events;  }

Теперь модальный компонент: modal.component.html

<p>{{modalHeader}}</p>
<p> {{eventdata }} </p>

Обратите внимание, что вам необходимо выполнить необходимый импорт ваших файлов. В компонентном модуле импорта NgbModalModule также добавляется в массив импорта. В файле component.ts: NgbModal и импортируйте {DefaultModal} из './default-modal/default-modal.component';