Angular组件复用问题：同组件可复用HTML元素能否跨组件单独调用？

完全可行，Angular提供了多种方式实现UI元素的复用，以下是两种最常用的解决方案：

方案一：封装为独立组件（推荐） #

这是Angular中复用UI的标准实践，将需要复用的HTML元素封装成独立组件，其他组件可直接引入使用，支持数据传递和事件交互。

操作步骤： #

1. 生成复用组件
   使用Angular CLI快速创建组件（以共享组件为例）：

ng generate component shared/reusable-ui

2. 填充复用内容
   将你需要复用的HTML代码放到reusable-ui.component.html中：

<!-- reusable-ui.component.html -->
<div class="reusable-section">
  <!-- 替换为你截图中的实际HTML内容 -->
  <input type="text" placeholder="示例输入框">
  <button>提交</button>
</div>

3. 添加交互逻辑（可选）
   如果需要和父组件交互，在reusable-ui.component.ts中定义输入输出属性：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-reusable-ui',
  templateUrl: './reusable-ui.component.html',
  styleUrls: ['./reusable-ui.component.css']
})
export class ReusableUiComponent {
  @Input() inputPlaceholder: string = '请输入内容';
  @Output() submit = new EventEmitter<string>();

  onSubmit(inputValue: string) {
    this.submit.emit(inputValue);
  }
}

4. 在其他组件中调用
   确保复用组件所在的模块（如SharedModule）已被目标模块导入，然后在父组件模板中直接使用：

<!-- 父组件模板 -->
<app-reusable-ui
  inputPlaceholder="自定义提示"
  (submit)="handleSubmit($event)"
></app-reusable-ui>

方案二：使用ng-template实现轻量片段复用 #

如果只是简单的无逻辑HTML片段，可通过ng-template定义模板，再通过ng-container在其他组件中渲染。

操作步骤： #

1. 定义模板片段
   在共享模块或公共组件中声明ng-template：

<!-- 公共模板 -->
<ng-template #simpleReusable>
  <div class="simple-fragment">
    <!-- 你的轻量复用HTML -->
    <span>这是可复用的文本片段</span>
  </div>
</ng-template>

2. 在目标组件中渲染
   通过ViewChild获取模板引用，再用ngTemplateOutlet渲染：

// 目标组件.ts
import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html'
})
export class TargetComponent {
  @ViewChild('simpleReusable') simpleReusable!: TemplateRef<any>;
}

<!-- 目标组件模板 -->
<ng-container *ngTemplateOutlet="simpleReusable"></ng-container>

关键提示 #

• 优先选择独立组件方案，便于维护样式、逻辑和扩展；
• 跨模块复用时，需在共享模块中声明并导出复用组件，再在目标模块导入共享模块；
• 组件样式可通过encapsulation属性控制是否隔离，避免全局样式污染。

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