看起来你遇到的核心问题是父组件无法直接获取子组件模板内的模板引用，加上参数传递和模态框打开时机的配合问题，导致模态框显示空白。我来一步步帮你修正：

问题根源分析 #

1. 你在AppComponent里用@ViewChild('content') content是无效的，因为#content这个模板引用是定义在ModalComponent的内部模板里的，父组件无法跨组件直接访问子组件的模板变量。
2. 虽然你通过@Input() beer传递了数据，但因为模态框打开的时机和Angular变更检测的配合问题，可能数据还没更新就打开了模态框，导致显示空白。

修正方案 #

我们调整组件职责，让ModalComponent自己管理模态框的模板引用和打开逻辑，父组件只需要传递数据并触发打开动作即可。

1. 修改ModalComponent #

让组件自己获取内部的模板引用，并新增一个直接接收数据并打开模态框的方法：

import {Component, Input, ViewChild} 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;
  @ViewChild('content') content; // 自己获取内部的模板引用

  constructor(private modalService: NgbModal) { }

  // 直接接收数据并打开模态框
  openWithBeer(item) {
    this.beer = item;
    this.modalService.open(this.content).result.then(
      (result) => this.closeResult = `Closed with: ${result}`,
      (reason) => this.closeResult = `Dismissed`
    );
  }
}

2. 简化AppComponent的逻辑 #

不需要再维护modalBeer变量，直接调用子组件的方法传递数据：

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

export class AppComponent implements OnInit {
  @ViewChild(ModalComponent) modalCmp;

  showModal(item) {
    // 直接调用子组件的方法，传递数据并打开模态框
    this.modalCmp.openWithBeer(item);
  }
}

3. 确保Modal模板正确渲染数据 #

在modal.component.html里，确保你在模板中使用了beer的属性，比如：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{beer.name}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p><strong>描述：</strong>{{beer.description}}</p>
    <p><strong>酒精含量：</strong>{{beer.abv}}%</p>
    <!-- 根据你的beer模型添加更多属性 -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save')">保存</button>
  </div>
</ng-template>

4. 额外检查 #

确保你已经在AppModule中导入了NgbModalModule：

import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他模块
    NgbModalModule
  ]
})
export class AppModule { }

这样调整后，点击网格项时，数据会直接传递到模态框组件，组件自己打开内部的模板，就能正常显示详情内容了。

内容的提问来源于stack exchange，提问作者Dandy