基于NativeScript与Angular组件继承优化迷你游戏画廊共享结构

嘿，这个需求太适合用Angular的组件继承来解决了——把所有游戏通用的结束流程、数据收集和后端上报逻辑抽成一个基础组件，让具体的游戏组件直接继承它，就能完美复用代码。下面是结合NativeScript+Angular特性的具体实现步骤：

首先创建一个抽象的基础组件，把所有游戏都需要的共享逻辑封装在这里。你可以把它整合到./game.ts里，或者单独新建./components/base-game/base-game.component.ts（结构更清晰）。这个组件不需要自己的模板，因为每个游戏的UI都是独特的，我们只复用逻辑层。

示例代码：

import { Component, OnInit } from "@angular/core";
import { AuthService } from "../services/auth.service"; // 假设你有获取账号信息的服务
import { HttpClient } from "@angular/common/http";

// 抽象组件，不能直接实例化，只能被继承
@Component({
  selector: "base-game",
  template: "" // 空模板，具体游戏用自己的UI模板
})
export abstract class BaseGameComponent implements OnInit {
  // 共享的游戏数据字段
  protected gameId: string; // 每个游戏的唯一标识，由子类赋值
  protected gameResult: "win" | "lose" | "draw";
  protected playData: any; // 玩法数据，比如耗时、操作次数等

  constructor(
    protected authService: AuthService, // 注入账号服务，子类自动继承
    protected http: HttpClient // 注入HTTP服务，用于上报后端
  ) {}

  ngOnInit() {
    // 通用初始化逻辑：绑定游戏结束监听
    this.setupGameEndListener();
  }

  // 抽象方法：强制子类实现自己的游戏结束触发逻辑
  protected abstract setupGameEndListener(): void;

  // 共享的游戏结束处理流程
  protected handleGameEnd(result: "win" | "lose" | "draw", playData: any) {
    this.gameResult = result;
    this.playData = playData;
    // 1. 收集账号信息
    const accountInfo = this.authService.getCurrentUser();
    // 2. 组装上报数据
    const reportData = {
      gameId: this.gameId,
      result: this.gameResult,
      playData: this.playData,
      account: accountInfo
    };
    // 3. 发送到后端
    this.sendReportToBackend(reportData);
  }

  // 共享的后端上报方法
  private sendReportToBackend(data: any) {
    this.http.post("/api/game/report", data).subscribe({
      next: (res) => console.log("游戏数据上报成功", res),
      error: (err) => console.error("游戏数据上报失败", err)
    });
  }
}

接下来，每个具体的游戏组件（比如俄罗斯方块、贪吃蛇）都继承这个BaseGameComponent，只需要实现自己独特的玩法逻辑，共享流程直接复用。

示例：./components/games/tetris/tetris.component.ts

import { Component } from "@angular/core";
import { BaseGameComponent } from "../../base-game/base-game.component";

@Component({
  selector: "tetris-game",
  templateUrl: "./tetris.component.html"
})
export class TetrisComponent extends BaseGameComponent {
  // 赋值当前游戏的唯一ID
  protected gameId = "tetris-001";

  // 实现抽象方法：绑定俄罗斯方块自己的游戏结束事件
  protected setupGameEndListener() {
    // 假设你的俄罗斯方块游戏有一个自定义的gameEnd事件
    this.tetrisGameInstance.on("gameEnd", (result, playData) => {
      // 直接调用父类的共享处理方法
      this.handleGameEnd(result, playData);
    });
  }

  // 俄罗斯方块独有的玩法逻辑
  private initTetris() {
    // ... 游戏初始化、操作控制等独有代码
  }
}

你原来在gallery.component.html里的循环展示逻辑完全不用改，只需要把每个游戏的组件selector放到循环判断里即可：

示例gallery.component.html：

<StackLayout *ngFor="let game of gameList">
  <!-- 根据游戏ID渲染对应组件 -->
  <tetris-game *ngIf="game.id === 'tetris-001'"></tetris-game>
  <snake-game *ngIf="game.id === 'snake-001'"></snake-game>
  <!-- 新增游戏直接加对应的判断和组件即可 -->
</StackLayout>

• 生命周期钩子：如果子类需要重写ngOnInit、ngOnDestroy等方法，一定要调用super.ngOnInit()，确保父类的通用逻辑能正常执行。
• 依赖注入：父组件中注入的服务（比如AuthService、HttpClient）会自动被子组件继承，不需要在子类中重复注入。
• NativeScript特性：如果涉及原生控件或NativeScript专属生命周期（比如loaded事件），同样可以在父组件封装通用逻辑，子类按需调用。
• 扩展性：后续如果要新增共享逻辑（比如游戏开始时的埋点），直接在基础组件里添加即可，所有子类自动受益。

这样一来，所有游戏的结束流程、数据收集和后端上报逻辑都只需要写一次，新增游戏只需要继承基础组件、实现独有玩法即可，完美实现代码复用！

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