Передача компонента другому компоненту через объект свойства (для мод ng- bootstrap) - PullRequest
Новая
       61

Передача компонента другому компоненту через объект свойства (для мод ng- bootstrap)

0 голосов
/ 01 мая 2020

Я недавно начал изучать angular 9.

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

Я пытаюсь отобразить обходные компоненты в качестве параметра для модального сервиса (как указано здесь - https://ng-bootstrap.github.io/# / components / modal / examples # component )

Вот что я сделал до сих пор:

Это компонент, который я хочу показать в модальном 

    //some imports...
    import { UploadMediaComponent } from '../upload-media/upload-media.component'; // Component I want to display in modal.

    @Component({
      selector: 'app-images',
      templateUrl: './images.component.html',
      styleUrls: ['./images.component.css']
    })
    export class ImagesComponent implements OnInit, OnDestroy {

    modal: IModal = {} as any;

    constructor(private httpService: HttpService, private commonService: CommonService, private modalService: ModalService) { }

    // some code here ...
    addImage() {
        this.modal.title = "Add New Image";
        this.modal.component = UploadMediaComponent; // Assigning UploadMediaComponent to a modal interface object.
        this.modalService.showModal(this.modal);
      }

    // some other code

Модальный компонент, отображающий модальное значение 

    import { IModal } from '../modal-interface';
    import { ModalService } from '../service/modal.service';

    @Component({
      selector: 'app-modal',
      templateUrl: './modal.component.html',
      styleUrls: ['./modal.component.css'],
    })
    export class ModalComponent implements OnInit {

      modal: IModal;

      constructor(config: NgbModalConfig, private modalService: NgbModal, private modalAppService: ModalService) { 
      //some default modal config options and getting modal options from modalAppService
      openModal();

     }

      ngOnInit(): void { }

      @ViewChild('content') content: ElementRef;

      //this method is called to open modal window
      openModal() {
        if (this.modal.component) {
          let modalInstance = this.modalService.open(this.modal.component, { size: 'lg' }); // this opens modal with UploadMediaComponent specified above.
          modalInstance.componentInstance.title = this.modal.title;
        }
        else {
          this.modalService.open(this.content, { size: 'lg' });
        }
      }

Этот код работает нормально. Модальное изображение отображается так, как задумано. Все отлично работает.

Мой вопрос - это правильный путь для достижения этой цели? Я не уверен, что передача компонента ссылка через интерфейс объекта является правильным способом. Если нет, есть ли другой способ добиться того же?

Спасибо.

...