ng-bootstrap模式在其他组件单击时触发

Question

我想在点击其他组件后使用ng-bootstrap打开一个带有项目详细信息的模态窗口，但我在转移component参数时遇到问题。

我在这里尝试使用其他主题的建议来使用@ViewChild('content') content;但它不起作用，我得到的只是一个空模态。

app.component.ts：

import {Component, OnInit, ViewChild} from '@angular/core';
import {ModalComponent} from './modal/modal.component';

export class AppComponent implements OnInit {

  @ViewChild('content') content;
  @ViewChild(ModalComponent) modalCmp;
  modalBeer;

  showModal(item) {
    this.modalBeer = item;
    this.modalCmp.open(this.content);
  }

}

app.component.html：

<main>
  <div class="container">
    <div class="row align-items-stretch">
      <app-grid-item
        *ngFor="let item of beers"
        [beer]="item"
        (click)="showModal(item)"
        class="col-sm-4">
      </app-grid-item>
    </div>
  </div>
  <app-modal [beer]="modalBeer"></app-modal>
</main>

modal.component.ts：

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

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

  closeResult: string;

  @Input() beer;

  constructor(private modalService: NgbModal) {
  }

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed`;
    });
  }
}

modal.component.html：

<ng-template #content let-c="close" let-d="dismiss">
[...]
</ng-template>