如何使用NgBootstrap从Angular的子组件中触发模态

我需要通过名为UserComponent的子组件上的“更新”按钮来触发一个在父组件中处于模态的模态 模态在ModalComponent中,并且都在MainComponent```` the modal it's supposed to be triggered with the function triggerModal(content)inside ModalComponent and I'm receiving中。Error TypeError:_co.modaltriggerModal不是函数错误。 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}`;
    }
  }



}
fangsufang 回答:如何使用NgBootstrap从Angular的子组件中触发模态

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3153757.html

大家都在问