Angular中父组件如何向ng-content投影内容暴露内部变量？

你可以通过Angular的模板上下文传递能力实现需求，核心是用ngTemplateOutlet给投影的自定义内容传入父组件的暴露变量，具体实现如下：

步骤1：创建辅助标记指令 #

先定义一个简单的指令，用于标记用户传入的自定义内容模板，方便父组件识别获取：

// content.directive.ts
import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[content]'
})
export class ContentDirective {
  constructor(public templateRef: TemplateRef<any>) {}
}

步骤2：修改父组件逻辑 #

调整父组件的模板和代码，将原本的ng-content替换为模板渲染逻辑，同时把要暴露的变量x作为上下文传入模板：

// parent.component.ts
import { Component, ContentChild } from '@angular/core';
import { ContentDirective } from './content.directive';

@Component({
  selector: 'parent',
  template: `
    <ng-container>
      <ng-container 
        [ngTemplateOutlet]="contentDir?.templateRef"
        [ngTemplateOutletContext]="{ x: x }"
      ></ng-container>
    </ng-container>
  `
})
export class ParentComponent {
  // 你需要暴露给外部的变量x，这里示例实现了close方法
  x = {
    close: () => {
      // 此处编写close方法的实际逻辑
      console.log('close方法被触发');
    }
  };

  // 获取用户传入的内容模板
  @ContentChild(ContentDirective) contentDir!: ContentDirective;
}

步骤3：组件使用方式 #

用户使用组件时，把自定义内容放在ng-template标签内，通过let-x语法接收父组件暴露的变量即可正常使用：

<parent>
  <ng-template content let-x="x">
    <div>
      <button (click)="x.close()"></button>
    </div>
  </ng-template>
</parent>

补充说明 #

• 如果想要简化使用语法，可以在父组件的ngTemplateOutletContext中添加$implicit: x配置，用户使用时直接写let-x即可，不需要额外指定="x"。
• 如果不想额外创建指令，也可以直接给父组件声明模板引用变量，内部内容直接访问父组件实例的属性：

  <parent #parentRef>
    <div content>
      <button (click)="parentRef.x.close()"></button>
    </div>
  </parent>
  

  这种方式不需要修改父组件原有逻辑，但会把整个父组件实例暴露给使用者，耦合度更高，仅适合简单临时场景使用。

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