Angular 15+如何实现HTML参数传递？对标NextJS实现方式

你之前在NextJS里用JSX.Element传递HTML内容直接渲染，在Angular里可以根据HTML内容的复杂度选择以下几种方式：

1. 静态/可信HTML内容：使用innerHTML绑定 #

如果你的htmlBody是纯静态HTML字符串（无复杂逻辑、来源可信），可以用这种最简单的方式：

定义接口 #

export interface SampleInterface {
  htmlBody: string; // 用字符串存储HTML内容
  label: string;
  id: string;
}

组件中渲染 #

在组件模板里，通过[innerHTML]指令绑定渲染：

<!-- 子组件模板 -->
<div [id]="val.id">
  <span>{{ val.label }}</span>
  <div [innerHTML]="val.htmlBody"></div>
</div>

父组件传递示例 #

// 父组件类
sampleData: SampleInterface = {
  htmlBody: '<p>这是一段<b>加粗</b>的HTML内容</p>',
  label: '示例标签',
  id: 'sample-id'
};

<!-- 父组件模板 -->
<app-sample [val]="sampleData"></app-sample>

2. 带逻辑/动态HTML：使用TemplateRef传递模板 #

如果你的HTML内容包含Angular指令、组件或动态逻辑（类似NextJS里的JSX组件），用这种方式更贴合Angular的组件化思想：

定义接口 #

import { TemplateRef } from '@angular/core';

export interface SampleInterface {
  htmlBody: TemplateRef<any>; // 用TemplateRef类型接收模板
  label: string;
  id: string;
}

子组件实现 #

子组件通过ngTemplateOutlet渲染传入的模板：

// 子组件类
import { Component, Input } from '@angular/core';
import { SampleInterface } from './sample.interface';

@Component({
  selector: 'app-sample',
  template: `
    <div [id]="val.id">
      <span>{{ val.label }}</span>
      <ng-container [ngTemplateOutlet]="val.htmlBody"></ng-container>
    </div>
  `
})
export class SampleComponent {
  @Input() val!: SampleInterface;
}

父组件传递模板 #

父组件用ng-template定义带逻辑的HTML内容，再传递给子组件：

<!-- 父组件模板 -->
<ng-template #customHtml>
  <div>
    <p>这是带Angular指令的内容：<span *ngIf="showContent">动态显示的文本</span></p>
    <app-child-component></app-child-component> <!-- 可嵌套其他组件 -->
  </div>
</ng-template>

<app-sample 
  [val]="{
    htmlBody: customHtml,
    label: '带逻辑的示例',
    id: 'dynamic-sample'
  }"
></app-sample>

// 父组件类
showContent = true; // 控制模板内的显示逻辑

注意事项 #

• 使用innerHTML时，Angular会自动清理不安全的HTML（比如脚本标签），如果必须渲染含脚本的内容，需要用DomSanitizer标记内容为安全，但强烈不建议这么做，避免XSS风险。
• TemplateRef方式支持Angular所有模板特性，是传递动态HTML内容的推荐方案。

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