Angular5/Ionic跨平台应用中HTML重复代码优化方案咨询

嘿，我完全懂这种重复代码的痛苦——维护起来简直是噩梦！针对你在Angular 5/Ionic项目里遇到的这个问题，这里有几个实用的解决方案，帮你彻底消除重复代码：

方案1：将重复内容抽成独立Angular组件（最推荐） #

这是Angular组件化思想的核心用法，把重复的页面内容封装成可复用组件，以后无论哪里需要都直接引用，修改也只需要改一处。

步骤： #

1. 用Ionic CLI生成新组件：

ionic generate component shared/content-block

（或者用Angular CLI：ng generate component shared/content-block）

2. 把你重复的div1和div2内容移到新组件的模板content-block.component.html里：

<div id="div1">some contents</div>
<div id="div2">more contents</div>

3. 在原页面的模板里，替换重复代码为组件引用：

<ion-slides pager [hidden]='!isMobileDevice'>
  <ion-slide>
    <app-content-block></app-content-block>
  </ion-slide>
</ion-slides>

<div [hidden]='isMobileDevice'>
  <app-content-block></app-content-block>
</div>

这样不仅消除了重复，还让代码结构更清晰，以后要修改内容或者样式，只需要在content-block组件里操作就行。

方案2：用Angular的ng-template和ng-container快速复用（适合简单场景） #

如果不想额外创建组件文件，比如内容比较简短，可以用Angular的模板引用功能，把重复内容定义成模板，然后在需要的地方渲染。

实现代码： #

<!-- 先定义可复用的模板 -->
<ng-template #sharedContent>
  <div id="div1">some contents</div>
  <div id="div2">more contents</div>
</ng-template>

<!-- 移动端渲染：用ion-slides包裹模板内容 -->
<ion-slides pager [hidden]='!isMobileDevice'>
  <ion-slide>
    <ng-container *ngTemplateOutlet="sharedContent"></ng-container>
  </ion-slide>
</ion-slides>

<!-- 非移动端渲染：直接显示模板内容 -->
<div [hidden]='isMobileDevice'>
  <ng-container *ngTemplateOutlet="sharedContent"></ng-container>
</div>

这个方案不需要新增组件，适合快速解决小范围的代码重复问题。

方案3：用CSS媒体查询控制显示（不推荐复杂内容） #

如果只是布局上的差异，你也可以尝试用Ionic的响应式CSS工具或者自定义媒体查询，只写一次内容，通过CSS控制不同设备下的显示容器。不过这个方案本质上还是有代码重复，适合非常简单的内容场景：

实现代码： #

<div class="content-wrapper">
  <!-- 移动端容器 -->
  <ion-slides pager class="mobile-view">
    <ion-slide>
      <div id="div1">some contents</div>
      <div id="div2">more contents</div>
    </ion-slide>
  </ion-slides>
  
  <!-- 非移动端容器 -->
  <div class="desktop-view">
    <div id="div1">some contents</div>
    <div id="div2">more contents</div>
  </div>
</div>

然后在组件样式文件里添加媒体查询：

/* 根据你的设备断点调整，这里以768px为例 */
@media (min-width: 768px) {
  .mobile-view {
    display: none !important;
  }
  .desktop-view {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .mobile-view {
    display: block !important;
  }
  .desktop-view {
    display: none !important;
  }
}

总结 #

优先推荐方案1，它最符合Angular的组件化设计，长期维护成本最低；如果是临时的简单复用，用方案2更快捷；方案3只适合内容极简的场景，不推荐用于复杂页面。

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