采用Feature-Based Architecture的Angular应用中，共享组件能否直接交互数据访问层？

直接让哑组件调用数据访问层是否违背原则？ #

是的，这种做法违背了Feature-Based Architecture和分层架构的核心原则——关注点分离。哑组件（展示型组件）的职责应该仅局限于：

• 接收输入数据并渲染UI
• 触发UI事件（如点击、输入）传递给上层

让哑组件直接调用API或数据访问层，会导致：

• 组件耦合度高：组件与特定数据服务/API强绑定，换数据源或API时必须修改组件，破坏复用性
• 违反单一职责：组件同时承担展示和数据获取逻辑，难以维护和测试
• 不符合Feature-Based Architecture的分层思想：数据访问层属于基础设施/数据层，哑组件属于UI层，跨层直接交互会打乱架构边界

遵循架构原则的处理方案 #

1. 容器组件 + 哑组件分离（推荐简单场景） #

用容器组件作为中间层，负责数据获取和业务逻辑，哑组件仅负责展示。特性模块只需引入容器组件即可复用整套逻辑。

示例代码：

// 容器组件（处理数据逻辑）
@Component({
  selector: 'app-shared-data-container',
  template: `<app-shared-dumb [items]="fetchedItems"></app-shared-dumb>`
})
export class SharedDataContainerComponent implements OnInit {
  fetchedItems: Item[];

  constructor(private itemService: ItemDataAccessService) {}

  ngOnInit() {
    this.itemService.getSharedItems().subscribe(items => {
      this.fetchedItems = items;
    });
  }
}

// 哑组件（仅负责展示）
@Component({
  selector: 'app-shared-dumb',
  template: `<ul><li *ngFor="let item of items">{{ item.label }}</li></ul>`
})
export class SharedDumbComponent {
  @Input() items: Item[];
}

2. 封装共享数据服务（适合组件与数据逻辑强绑定的场景） #

在共享模块中创建专用的共享数据服务，由服务负责API调用和数据处理，组件仅注入服务获取数据（组件不再是纯哑组件，但逻辑仍封装在服务层）。

示例代码：

// 共享数据服务
@Injectable({ providedIn: 'root' })
export class SharedItemService {
  constructor(private http: HttpClient) {}

  getSharedItems(): Observable<Item[]> {
    return this.http.get<Item[]>('/api/shared/items');
  }
}

// 共享组件（依赖共享服务获取数据）
@Component({
  selector: 'app-shared-item-list',
  template: `<ul><li *ngFor="let item of items$ | async">{{ item.label }}</li></ul>`
})
export class SharedItemListComponent implements OnInit {
  items$: Observable<Item[]>;

  constructor(private sharedItemService: SharedItemService) {}

  ngOnInit() {
    this.items$ = this.sharedItemService.getSharedItems();
  }
}

3. 全局状态管理（适合复杂应用） #

如果应用使用NgRx等状态管理工具，共享组件可以订阅全局状态中的数据，数据获取逻辑由Effects负责处理，组件完全保持纯净。

示例代码：

// 共享组件（订阅全局状态）
@Component({
  selector: 'app-shared-item-list',
  template: `<ul><li *ngFor="let item of items$ | async">{{ item.label }}</li></ul>`
})
export class SharedItemListComponent implements OnInit {
  items$ = this.store.select(selectSharedItems);

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.store.dispatch(loadSharedItems());
  }
}

核心原则总结 #

无论选择哪种方案，都要确保：

• UI组件（哑/展示型）不直接与数据访问层交互
• 数据获取、业务逻辑封装在服务层、容器组件或状态管理中
• 共享组件保持低耦合，仅依赖通用输入或全局状态，不绑定特定特性的数据源

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