如何在Angular其他组件中复用某组件的部分HTML代码

这个需求完全可以实现，别直接复制div1代码到子组件，后续改代码要两边同步很容易漏，用Angular原生的复用方案就行，按适配场景选对应方法：

方案1：抽离为独立公共组件（优先选，符合Angular开发规范） #

这是跨组件复用UI块的标准解法，适合所有复用场景：

• 第一步：新建一个公共组件（比如叫Div1BlockComponent），把主组件里div1的所有模板代码、关联逻辑、样式全部迁移到这个组件里。如果div1在不同场景下需要展示不同内容、触发不同事件，给组件加@Input()输入属性、@Output()输出事件做配置即可。
• 第二步：在主组件、子组件所属的模块里导入/声明这个公共组件。
• 第三步：替换原位置的代码，原来写div1DOM的地方，直接用公共组件的标签占位就行。

代码示例：
公共组件模板div1-block.component.html

<div1>
  some elements
  <!-- 原div1的所有绑定、逻辑全部保留在这里 -->
</div1>

改造后的主组件模板：

<!-- 注意：Angular组件模板里不要写<html>标签，组件本身是挂载到index.html的DOM节点下的，重复写html根标签会导致DOM结构异常 -->
<app-div1-block></app-div1-block>
<div2>
  some elements
</div2>

改造后的子组件模板，完全符合你的预期结构：

<app-div1-block></app-div1-block> <!-- 复用自主组件的div1块 -->
<div2>
  some elements
</div2>
<div3>
  some elements
</div3>

方案2：ng-template局部模板复用（适合div1和主组件逻辑强耦合的场景） #

如果div1和主组件的业务逻辑绑定特别深，抽成独立组件要传十好几个参数太麻烦，且子组件就是主组件的直接子级，可以用模板引用传递的方式复用：

1. 在主组件里把div1包在ng-template标签内，定义模板引用变量，主组件本身要展示div1的位置用ngTemplateOutlet渲染这个模板：

<ng-template #div1Tpl>
  <div1>
    some elements
  </div1>
</ng-template>

<ng-container [ngTemplateOutlet]="div1Tpl"></ng-container>
<div2>
  some elements
</div2>
<!-- 渲染子组件的时候把模板传过去 -->
<app-child [div1Template]="div1Tpl"></app-child>

2. 子组件里接收传入的模板引用，在需要展示div1的位置渲染即可：
   子组件ts代码：

import { Component, Input, TemplateRef } from '@angular/core';
@Component({/* 组件配置 */})
export class ChildComponent {
  @Input() div1Template!: TemplateRef<any>;
}

子组件模板：

<ng-container [ngTemplateOutlet]="div1Template"></ng-container>
<div2>
  some elements
</div2>
<div3>
  some elements
</div3>

这个方案只适合父子组件直接关联的场景，如果两个组件没有直接的渲染引用关系，传模板会绕很多弯路，这种情况直接选方案1即可

避坑提醒 #

不要尝试用原生JS操作DOM，直接把主组件里的div1节点挪到子组件中。这种方式绕过了Angular的变更检测机制，大概率会出现数据不更新、绑定事件失效、内存泄漏的问题，完全不推荐。

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