Как запустить модальный из дочернего компонента в Angular, используя NgBootstrap - PullRequest
Новая
       36

Как запустить модальный из дочернего компонента в Angular, используя NgBootstrap

0 голосов
/ 06 ноября 2019

Мне нужно вызвать модальное устройство, которое находится в родительском компоненте, с помощью кнопки «обновить», которая находится на дочернем компоненте с именем UserComponent Модальное значение находится в ModalComponent, и оба находятся в MainComponent```` the modal it's supposed to be triggered with the function triggerModal (content) inside ModalComponent and I'm receiving ОШИБКА TypeError: _co.modaltriggerModal не является функцией```Error. main.component.html 

<div class="container">
  <div class="row">

    <app-form class="col-md-6"></app-form>
    <app-user (activateModal)="modal.triggerModal(content)"class="col-md-6"></app-user>

    <ng-template #content let-modal>
      <app-modal #modal></app-modal>
    </ng-template>
  </div>
</div>

user.component.html 

<div class="card-columns">
  <div class="card" *ngFor="let m of pet">
    <img [src]="m.photo" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">{{m.name}}</h5>
      <p class="card-text">{{m.description}}</p>
      <div class="row">
        <a [routerLink]="['details', m.id]" class="btn btn-primary col-md-6">Details</a>
        <a (click)="activeModal(m.id)" class="btn btn-primary col-md-6">Update</a>
      </div>
    </div>
  </div>
</div>

user.component.ts 

export class UserComponent implements OnInit {

  @Output() activateModal: EventEmitter<number>
  private m: Pet[]
  modalID: number = 0
  closeResult: string

  constructor(private petService: PetService,private modalService: NgbModal) {
      console.log("constructor")
      this.pets = petService.petLists()
      this.activateModal = new EventEmitter()
  }

  ngOnInit() {
  }

  activateModal(id:number)  {
    this.activateModal.emit(id)
  }

modal.component.ts 

export class ModalComponent implements OnInit, OnChanges {

  closeResult: string;
  constructor(private modalService: NgbModal) { }

  ngOnInit() {
    // console.log("status: ", this.modal)
    //this.open(this.modal)
  }

  ngOnChanges(changes: SimpleChanges): void {}


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

  }

  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}`;
    }
  }



}
...