Есть ли шанс получить всплывающее окно мод ng-boostrap в качестве компонента и получить его от другого компонента? - PullRequest
Новая
       42

Есть ли шанс получить всплывающее окно мод ng-boostrap в качестве компонента и получить его от другого компонента?

0 голосов
/ 31 декабря 2018

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

Родительский HTML: 

<div id="list">
<ul><li class"list li><a id="modal1" (click) = "openmodal($event)"></a>
....
....
</div>

Родительский компонент: 

import { Component, OnInit } from '@angular/core';
import { ChildModalComponent } from 'src/app/popup-modal/popup-modal.component';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'parentcomp',
  templateUrl: './parentcomp.html',
  styleUrls: ['./parentcomp.component.scss']
})
export class ParentComponent implements OnInit {
  private loadComponent = false;
  closeResult: string;
  constructor(private modalService : NgbModal) {}
  ngOnInit() {
  }
  openmodal(event) {
    alert("clicked!")
    //this.modalService = modalService;
    let component = new ChildModalComponent(modalService);
    //component.open("Hello");
    //this.modalService.open("Hello!!");
  }
}

Здесь, когда я открыл this.modalService.open("Hello!!") - всплывающее окно с открытым обычным текстом без ng-template

Дочерний HTML: 

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="dateOfBirth">Date of birth</label>
          <div class="input-group">
            <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>

Дочерние компоненты: 

import {Component} from '@angular/core';    
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './child.component.html'
})
export class ChildModalComponent {
  closeResult: string;    
  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

Как открыть child.component.html всплывающее окно?И как передать идентификатор или заголовок при нажатии на openmodal($event)?

экран вывода: this.serviceModal.open( Код: Код редактора

1 Ответ

0 голосов
/ 31 декабря 2018

Ваш родительский компонент содержит ng-template, который охватывает дочерний компонент, которому не нужно ничего знать о модальном.

Дочерний компонент может иметь привязки @Input() и @Output() для передачи ему данных или взаимодействия с родителем изнутри дочернего элемента (т. Е. Закрытия модального окна).

Пример:

Родительский шаблон 

<ng-template #content let-modal let-inputData="inputData">
    <child-component
        [input]="inputData"
        (failed)="modal.dismiss()"
        (succeeded)="modal.dimiss()"
    />
</ng-template>

<button (click)="modalOpen(content)">Launch modal</button>

Родительский класс 

....
modalOpen(content) {
    this.modalService.open(content)...
}

Дочернему компоненту не требуется реализовывать какие-либо модальные специфические функции.

[ОБНОВЛЕНИЕ]

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

...