为什么我的角度事件被跳过而模态未打开？

Question

我有一个添加按钮，它将打开一个包含要填写的表单的模式。但是由于某种原因，它完全跳过了事件的发出，并且模态只有一半打开，也就是说背景变暗了，但是实际模态却不存在。

这是我的添加按钮。component

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

import { Artwork, ArtworkService } from '../../../_services/artwork.service';
import { AddArtModalComponent } from '../add-art-modal/add-art-modal.component';


@Component({
  selector: 'app-add-art-button',
  templateUrl: './add-art-button.component.html',
  styleUrls: ['./add-art-button.component.css']
})
export class AddArtButtonComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  artworkList: Artwork[];

  constructor(
    private addModalService: NgbModal
  ) { }

  ngOnInit() {
  }
  addArtwork() {
    this.add.emit();
    const modalRef = this.addModalService.open(AddArtModalComponent, { size: 'lg' });
  }
}

这被发送到该组件：

<app-artwork-list #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)"></app-artwork-list>
<app-artwork-input #input (ok)="list.refresh()"></app-artwork-input>

影响将出现在模态部分：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Artwork, ArtworkService } from '../../../_services/artwork.service';

@Component({
  selector: 'app-add-art-modal',
  templateUrl: './add-art-modal.component.html',
  styleUrls: ['./add-art-modal.component.css']
})
export class AddArtModalComponent implements OnInit {
  @Output() ok = new EventEmitter<Artwork>();
  @Output() cancel = new EventEmitter();
  artwork: Artwork;

  constructor(
    public activeModal: NgbActiveModal,
    private artworkService: ArtworkService
  ) { }

  ngOnInit() {
  }

  startAddingArtwork() {
    console.log('start adding artwork');
    this.artwork = new Artwork();
  }

  startEditingArtwork(id: number) {
    console.log('start editing artwork ' + id);
    this.artworkService.retrieve(id).then(
      artwork => this.artwork = artwork
    );
  }
}