如何优化Angular组件中配置项存在性校验的重复条件渲染代码？

你可以根据业务场景选择以下三种优化方案：

方案1：遍历有效配置项（最推荐，无重复代码） #

先在组件类中预处理配置对象，过滤掉值为undefined的键值对，再在模板中统一遍历渲染：

组件TS代码 #

cfg = { name: "sam", address: "NY", age: 51 };
// 可选：如果需要给不同配置项加展示前缀，可以定义映射表
cfgLabelMap = {
  name: '姓名',
  address: '地址',
  age: '年龄'
};

// 获取所有有效值的配置项
get validCfgItems() {
  return Object.entries(this.cfg).filter(([_, value]) => value !== undefined);
}

模板代码 #

<p *ngFor="let [key, value] of validCfgItems">
  <!-- 不需要前缀可以去掉下面这行，直接写{{value}} -->
  {{cfgLabelMap[key]}}：{{value}}
</p>

适用场景：所有配置项展示样式统一，后续新增配置项不需要修改模板，仅需更新cfg对象和映射表即可。

方案2：封装通用配置展示组件 #

如果不同配置项需要独立定制样式、内容前缀，可以封装一个通用组件自动处理非空判断：

子组件TS（config-item.component.ts） #

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

@Component({
  selector: 'app-config-item',
  template: `<p *ngIf="value !== undefined"><ng-content></ng-content>{{value}}</p>`
})
export class ConfigItemComponent {
  @Input() value: any;
}

父组件模板调用 #

<app-config-item [value]="cfg.name">姓名：</app-config-item>
<app-config-item [value]="cfg.address">地址：</app-config-item>
<app-config-item [value]="cfg.age">年龄：</app-config-item>

适用场景：配置项需要少量自定义内容，不想统一遍历的场景。

方案3：自定义结构指令简化判断 #

如果不想修改现有DOM结构，仅想要简化非空判断的写法，可以自定义结构指令：

指令代码（if-defined.directive.ts） #

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appIfDefined]'
})
export class IfDefinedDirective {
  @Input() set appIfDefined(value: any) {
    value !== undefined 
      ? this.viewContainer.createEmbeddedView(this.templateRef)
      : this.viewContainer.clear();
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
}

模板中使用 #

<p *appIfDefined="cfg.name">{{cfg.name}}</p>
<p *appIfDefined="cfg.address">{{cfg.address}}</p>
<p *appIfDefined="cfg.age">{{cfg.age}}</p>

适用场景：保留原有DOM结构，仅简化判断逻辑的场景。

小提示：如果你的业务规则里还需要排除null、空字符串、0等假值，可以把上述方案里的value !== undefined判断逻辑调整为value != null或者自定义的空值校验规则即可。

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