Angular中外观一致逻辑不同组件的最佳实践咨询

绝对不要创建两个存在.scss和.html冗余的组件——维护成本极高，后续UI改动要同步改两个地方，完全不符合DRY（Don't Repeat Yourself）原则。策略模式结合Angular依赖注入是最优解，既能复用UI代码，又能灵活切换业务逻辑，下面是具体实现思路和代码示例：

核心思路：UI与业务逻辑解耦 #

把组件的UI渲染逻辑和数据处理的业务逻辑完全分离：

• 组件只负责UI渲染、用户交互事件的触发，不关心数据从哪来、怎么存
• 定义统一的业务逻辑接口，分别实现「本地存储」和「后端交互」两个具体服务
• 通过Angular的依赖注入机制，给组件注入不同的服务实现，从而切换业务行为

具体实现步骤 #

1. 定义抽象业务接口 #

先创建一个抽象类，规定组件需要的所有业务方法：

// data-handler.abstract.ts
import { Observable } from 'rxjs';

export abstract class DataHandler {
  // 获取数据的方法
  abstract fetchData(): Observable<any>;
  // 保存数据的方法
  abstract saveData(payload: any): Observable<any>;
}

2. 实现两个具体业务服务 #

分别实现本地存储和后端交互的服务，都遵循上面的抽象接口：

本地存储服务

// local-data-handler.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { DataHandler } from './data-handler.abstract';

@Injectable()
export class LocalDataHandler implements DataHandler {
  fetchData(): Observable<any> {
    const localData = localStorage.getItem('app_local_data');
    return of(localData ? JSON.parse(localData) : null);
  }

  saveData(payload: any): Observable<any> {
    localStorage.setItem('app_local_data', JSON.stringify(payload));
    return of(payload);
  }
}

后端交互服务

// backend-data-handler.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DataHandler } from './data-handler.abstract';

@Injectable()
export class BackendDataHandler implements DataHandler {
  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    return this.http.get('/api/v1/data');
  }

  saveData(payload: any): Observable<any> {
    return this.http.post('/api/v1/data', payload);
  }
}

3. 创建通用UI组件 #

组件只处理UI相关逻辑，业务逻辑完全依赖注入的DataHandler：

// common-data.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { DataHandler } from './data-handler.abstract';

@Component({
  selector: 'app-common-data',
  templateUrl: './common-data.component.html',
  styleUrls: ['./common-data.component.scss']
})
export class CommonDataComponent {
  data$: Observable<any>;

  // 注入抽象服务，不关心具体实现
  constructor(@Inject(DataHandler) private dataHandler: DataHandler) {
    this.data$ = this.dataHandler.fetchData();
  }

  onSubmit(formValue: any) {
    this.dataHandler.saveData(formValue).subscribe({
      next: () => alert('保存成功'),
      error: () => alert('保存失败')
    });
  }
}

对应的common-data.component.html和common-data.component.scss只写一次，不用重复创建。

4. 切换业务逻辑 #

通过在不同的模块/组件层级提供不同的服务实现，来得到两种业务行为的组件：

方式1：模块级别配置

在本地版本的模块中提供LocalDataHandler：

// local-data.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CommonDataComponent } from './common-data.component';
import { DataHandler } from './data-handler.abstract';
import { LocalDataHandler } from './local-data-handler.service';

@NgModule({
  declarations: [CommonDataComponent],
  imports: [CommonModule],
  providers: [{ provide: DataHandler, useClass: LocalDataHandler }],
  exports: [CommonDataComponent]
})
export class LocalDataModule {}

在后端版本的模块中提供BackendDataHandler：

// backend-data.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { CommonDataComponent } from './common-data.component';
import { DataHandler } from './data-handler.abstract';
import { BackendDataHandler } from './backend-data-handler.service';

@NgModule({
  declarations: [CommonDataComponent],
  imports: [CommonModule, HttpClientModule],
  providers: [{ provide: DataHandler, useClass: BackendDataHandler }],
  exports: [CommonDataComponent]
})
export class BackendDataModule {}

之后在需要的地方直接导入对应模块，使用<app-common-data>即可。

方式2：组件级别动态配置

如果需要在同一个页面同时使用两种版本，可以用*ngComponentOutlet动态提供服务：

<!-- 本地版本 -->
<ng-container *ngComponentOutlet="CommonDataComponent; providers: [{ provide: DataHandler, useClass: LocalDataHandler }]"></ng-container>

<!-- 后端版本 -->
<ng-container *ngComponentOutlet="CommonDataComponent; providers: [{ provide: DataHandler, useClass: BackendDataHandler }]"></ng-container>

补充方案：少量UI差异的处理 #

如果两个版本有极少量UI差异（比如按钮文字），可以通过@Input()参数传递，或者用内容投影(ng-content)来处理，不用拆分组件：

// 在CommonDataComponent中添加Input
@Input() saveButtonText = '保存';

<!-- 使用时传入不同文字 -->
<app-common-data saveButtonText="保存到本地"></app-common-data>
<app-common-data saveButtonText="同步到后端"></app-common-data>

为什么这是最佳实践？ #

• 完全遵循单一职责原则：组件管UI，服务管业务逻辑
• 无冗余代码，UI改动只需要修改一次
• 扩展性极强：以后要加第三种数据源（比如IndexedDB），只需要新增一个DataHandler实现即可
• 易于测试：可以给组件注入Mock服务，单独测试UI逻辑

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