Angular中仅含HTML与CSS的组件如何实现复制、编辑及灵活复用？

你可以通过「带默认内容的可替换插槽 + 布局开关 + CSS变量」的组合方案实现需求，全程无需修改基础组件的默认模板和样式，完全遵循DRY原则：

1. 基础通用组件设计 #

核心思路是给每个占位符区域定义「默认内容+可替换输入模板」，同时内置常用布局开关，用CSS变量暴露可修改的样式参数：

组件逻辑代码 #

import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  // 关闭样式封装方便外部覆盖，给所有基础样式加专属类前缀避免全局污染
  encapsulation: ViewEncapsulation.None
})
export class ExampleComponent {
  // 内置布局切换开关，可根据需求扩展
  @Input() layout: 'grid' | 'fixed' | 'custom' = 'grid';
  // 各占位符区域的自定义模板输入，不传则用默认内容
  @Input() headerTpl?: TemplateRef<any>;
  @Input() mainTpl?: TemplateRef<any>;
  @Input() sidebarTpl?: TemplateRef<any>;
  @Input() footerTpl?: TemplateRef<any>;
}

组件模板代码 #

<div class="app-example" 
  [class.app-example--grid]="layout === 'grid'"
  [class.app-example--fixed]="layout === 'fixed'">
  <!-- 头部区域：传自定义模板则用自定义，否则用默认内容 -->
  <ng-container *ngTemplateOutlet="headerTpl || defaultHeader"></ng-container>
  <ng-template #defaultHeader>
    <header class="app-example__header">30个页面通用的默认头部内容</header>
  </ng-template>

  <!-- 主体区域 -->
  <ng-container *ngTemplateOutlet="mainTpl || defaultMain"></ng-container>
  <ng-template #defaultMain>
    <main class="app-example__main">30个页面通用的默认主体内容</main>
  </ng-template>

  <!-- 侧边栏区域 -->
  <ng-container *ngTemplateOutlet="sidebarTpl || defaultSidebar"></ng-container>
  <ng-template #defaultSidebar>
    <aside class="app-example__sidebar">30个页面通用的默认侧边栏内容</aside>
  </ng-template>

  <!-- 底部区域 -->
  <ng-container *ngTemplateOutlet="footerTpl || defaultFooter"></ng-container>
  <ng-template #defaultFooter>
    <footer class="app-example__footer">30个页面通用的默认底部内容</footer>
  </ng-template>
</div>

组件基础样式 #

/* 全局样式前缀，避免污染其他组件 */
.app-example {
  --grid-cols: 3;
  --grid-gap: 16px;
  --fixed-top: 0;
  --header-height: 60px;
}
/* Grid布局默认样式 */
.app-example--grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}
/* Fixed定位默认样式 */
.app-example--fixed {
  position: fixed;
  top: var(--fixed-top);
  left: 0;
  width: 100%;
}
/* 通用子元素样式 */
.app-example__header { height: var(--header-height); }
.app-example__main { min-height: calc(100vh - var(--header-height)); }

2. 不同场景的调用方式 #

普通通用页面 #

无需任何自定义，直接调用基础组件即可，默认加载所有通用内容和grid布局：

<app-example></app-example>

切换为fixed定位布局 #

通过layout参数切换布局，同时可以修改CSS变量自定义参数：

<!-- 切换为fixed布局，修改定位距离顶部20px -->
<app-example layout="fixed" style="--fixed-top: 20px;"></app-example>

修改Grid布局参数 #

直接覆盖CSS变量即可，不需要修改基础组件样式：

<!-- 把默认3列网格改为2列，间距改为24px -->
<app-example style="--grid-cols: 2; --grid-gap:24px;"></app-example>

单页面新增自定义元素 #

只需要传入对应区域的自定义模板，其他区域仍然用默认内容：

<app-example [mainTpl]="customMain">
  <ng-template #customMain>
    <main class="app-example__main">
      <!-- 保留原有通用内容 -->
      30个页面通用的默认主体内容
      <!-- 新增3个自定义元素 -->
      <div class="custom-el-1">自定义元素1</div>
      <div class="custom-el-2">自定义元素2</div>
      <div class="custom-el-3">自定义元素3</div>
    </main>
  </ng-template>
</app-example>

覆盖默认样式 #

直接在调用方的组件样式文件中，用基础组件的类前缀选择器修改样式即可：

/* 只修改当前页面的头部背景色 */
.app-example__header {
  background: #1890ff;
  color: #fff;
}

3. 扩展方案 #

如果有多个页面需要用到同一套自定义规则，可以基于基础组件二次封装专用组件，不需要重复复制通用代码：

// 特殊场景专用组件
@Component({
  selector: 'app-example-special',
  template: `
  <app-example layout="fixed" [mainTpl]="specialMain">
    <ng-template #specialMain>
      <!-- 特殊场景的自定义内容 -->
    </ng-template>
  </app-example>
  `
})
export class ExampleSpecialComponent {}

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