ng-template内双向数据绑定失效，变量无法显示求助

在Angular项目里，ng-template内的selectedContent和selectedSummary变量无法显示（呈现空白），但<p>标签里的硬编码字符串能正常显示。将内容移到ng-template外时，变量显示正常，已排查SCSS样式、控制台错误、变量赋值（即使赋值异常也应显示默认值），均无问题。

相关代码 #

模态框模板代码 #

<ng-template #modalTemplate>
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ selectedContent }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ selectedSummary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-template>

TS文件代码 #

变量声明

selectedContent = 'NO CONTENT'; selectedSummary = 'NO SUMMARY';

触发模态框的方法

onInsepctTranscription(modalTemplate: TemplateRef<any>, content: string, summary: string) {
  console.log('On inspect');
  this.selectedContent = content;
  this.selectedSummary = summary;
  console.log('Content', this.selectedContent);

  this.modalService
    .open(modalTemplate, { size: 'lg', title: 'Foo' })
    .subscribe((action) => {
      console.log('modalAction', action);
    });
}

完整HTML代码 #

<app-page-layout>
  <div class="content-layout">
    <h1 id="page-title" class="content__title">Transcriptions</h1>
    <div class="content__body">
      <ul class="accordion">
        <ng-container *ngFor="let item of transcriptions; let first = first">
          <li class="accordion-list">
            <div class="accordion-item" (click)="selectItem(item.id)">
              <app-transcription [transcriptionItem]="item" [isChecked]="first"></app-transcription>
              <i class='bx bx-chevron-right chevron-right-icon' *ngIf="item.id === selectedItemId"></i>
              <!-------MENU------->
              <div class="transcription-menu">
                <div class="menu-item" (click)="onDeleteTranscription(item.id)">
                  <i class='bx bx-trash'></i>
                  <span>Delete</span>
                </div>
                <div class="menu-item" (click)="onInsepctTranscription(modalTemplate, item.content, item.summary)">
                  <i class='bx bx-book-open'></i>
                  <span>Inspect</span>
                </div>
              </div>
              <!------------------->
            </div>
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</app-page-layout>

<ng-template #modalTemplate>
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ selectedContent }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ selectedSummary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-template>

问题原因 #

核心是**ng-template的上下文作用域不匹配**：当通过modalService.open打开模板时，模板默认使用的是模态框服务内部的上下文，而非当前组件的上下文，导致模板无法访问组件内声明的selectedContent和selectedSummary变量，所以呈现空白（连默认值都无法显示）。

解决方案 #

方案1：给模板传递上下文（推荐） #

打开模态框时，通过配置参数传递组件变量作为模板上下文：

onInsepctTranscription(modalTemplate: TemplateRef<any>, content: string, summary: string) {
  this.selectedContent = content;
  this.selectedSummary = summary;

  this.modalService
    .open(modalTemplate, { 
      size: 'lg', 
      title: 'Foo',
      // 传递上下文对象
      context: {
        selectedContent: this.selectedContent,
        selectedSummary: this.selectedSummary
      }
    })
    .subscribe((action) => {
      console.log('modalAction', action);
    });
}

修改模板，用let-语法接收上下文变量：

<ng-template #modalTemplate let-content="selectedContent" let-summary="selectedSummary">
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ content }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ summary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-template>

方案2：使用独立组件作为模态框内容（适合复杂场景） #

创建独立的模态框组件，通过@Input()接收数据：

// transcription-inspect-modal.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-transcription-inspect-modal',
  templateUrl: './transcription-inspect-modal.component.html'
})
export class TranscriptionInspectModalComponent {
  @Input() content!: string;
  @Input() summary!: string;
}

组件模板：

<!-- transcription-inspect-modal.component.html -->
<div class="scroll-container">
  <div class="left-content">
    <div class="scrollable-text" >
      {{ content }}
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="right-content">
    <div class="scrollable-text">
      {{ summary }}
      <p>Lorem ipsum</p>
    </div>
  </div>
</div>

父组件中打开模态框：

onInsepctTranscription(content: string, summary: string) {
  this.modalService
    .open(TranscriptionInspectModalComponent, { 
      size: 'lg', 
      title: 'Foo',
      // 传递组件输入属性
      inputs: {
        content: content,
        summary: summary
      }
    })
    .subscribe((action) => {
      console.log('modalAction', action);
    });
}

修改父组件HTML的点击事件，无需传递模板引用：

<div class="menu-item" (click)="onInsepctTranscription(item.content, item.summary)">
  <i class='bx bx-book-open'></i>
  <span>Inspect</span>
</div>

方案3：用ng-container替代ng-template（临时应急） #

将ng-template换成ng-container，通过*ngIf控制显示：

<ng-container *ngIf="showModal">
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ selectedContent }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ selectedSummary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-container>

TS中控制显示状态：

showModal = false;

onInsepctTranscription(content: string, summary: string) {
  this.selectedContent = content;
  this.selectedSummary = summary;
  this.showModal = true;
}

注：此方式适合简单场景，遮罩、关闭逻辑需自行实现。

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