Angular瓦片系统父子组件中，部分组件共享ViewModel是否为反模式？

核心问题拆解 #

先明确你的两个核心诉求：

• 想在Angular父子组件间共享功能，但不想为每个小功能都创建服务；
• 瓦片系统中，父组件下的部分子组件共享ViewModel，会不会是反模式？

共享ViewModel是不是反模式？ #

完全不是反模式，反而在瓦片这种强关联的父子组件场景里，是非常合理的实践：

• 当子组件只是父组件UI的拆分（比如瓦片的不同功能区块），共享ViewModel能保证状态绝对一致，省去大量状态同步的冗余逻辑；
• 只要ViewModel的职责足够单一（只聚焦当前瓦片的状态和业务逻辑），不会变成啥都管的“上帝对象”，就完全没问题。

无需大量创建服务的功能共享方案 #

如果不想为每个小功能都建服务，可以试试这几种实用方案：

1. 父组件通过@Input传递ViewModel实例 #

直接把父组件的ViewModel（比如一个类实例）通过@Input传给需要共享的子组件：

// 父组件
@Component({
  template: `
    <tile-child [sharedVm]="tileViewModel"></tile-child>
    <tile-another-child [sharedVm]="tileViewModel"></tile-another-child>
  `
})
export class TileParentComponent {
  tileViewModel = new TileViewModel();
}

// 子组件
@Component({...})
export class TileChildComponent {
  @Input() sharedVm: TileViewModel;

  // 直接操作sharedVm的属性或方法，父组件和其他子组件会同步看到变化
}

这种方式适合状态和逻辑都和当前瓦片强绑定的场景，ViewModel可以封装瓦片的业务逻辑，子组件只负责UI渲染。

2. 组件继承复用逻辑 #

如果多个子组件有重复逻辑，可以抽成基类组件，让子组件直接继承：

// 基类组件（只封装逻辑，不负责UI渲染）
export class TileBaseComponent {
  protected handleTileAction() {
    // 共享的功能实现
  }
}

// 子组件继承基类
@Component({...})
export class TileChildComponent extends TileBaseComponent {
  // 直接调用handleTileAction即可复用逻辑
}

注意：继承只适合纯逻辑复用，别过度依赖导致组件耦合过重。

3. 局部组件级服务 #

如果确实需要用服务，但不想全局注册，可以在父组件的providers数组里注册服务，这样该服务的实例只会在父组件及其子组件范围内共享：

@Component({
  providers: [TileLocalService], // 局部注册，仅当前父组件树可用
  ...
})
export class TileParentComponent {}

// 子组件直接注入使用
@Component({...})
export class TileChildComponent {
  constructor(private tileService: TileLocalService) {}
}

这种方式既享受到服务的解耦优势，又不会污染全局服务池，很适合瓦片这种独立模块场景。

绝对不推荐的方案：复制组件功能 #

直接复制代码会带来巨大的维护隐患——后续修改功能时，要同步修改所有复制的地方，极易出现逻辑不一致的问题，完全不可取。

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