如何在Angular 4中检测应用是否运行于App Inventor环境？

没问题，我来帮你搞定这个问题——你遇到的其实是两个关联的小问题：一是TypeScript类型检查不认识window.AppInventor导致报错，二是需要一套逻辑区分桌面浏览器和App Inventor环境，自动切换存储方式。下面是具体的实现步骤：

1. 扩展Window类型，解决TypeScript报错 #

TypeScript默认的Window类型里没有AppInventor这个属性，所以直接访问会触发类型错误。我们可以通过扩展类型定义来解决：

在你的Angular项目根目录下创建（或修改）一个typings.d.ts文件，添加以下代码：

interface Window {
  AppInventor?: {
    getWebViewString: () => string;
    setWebViewString: (value: string) => void;
  };
}

这样TypeScript就会识别window.AppInventor的存在，不会再抛出"Property 'AppInventor' does not exist on type 'window'"的错误了。

2. 实现环境检测逻辑 #

接下来写一个简单的工具函数，用来判断当前是否处于App Inventor的WebViewer环境：

export function isRunningInAppInventor(): boolean {
  // 检查window上是否存在AppInventor对象，且包含我们需要的核心方法
  return !!window.AppInventor 
    && typeof window.AppInventor.getWebViewString === 'function' 
    && typeof window.AppInventor.setWebViewString === 'function';
}

这个函数会返回布尔值：true表示在App Inventor环境，false则是桌面浏览器环境。

3. 封装统一的存储服务 #

为了让业务代码不用关心底层存储实现，我们可以封装一个Angular服务，自动根据环境切换存储方式：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CrossEnvStorageService {
  constructor() { }

  // 存储数据
  setItem(key: string, value: any): void {
    const serializedValue = JSON.stringify(value);
    
    if (this.isAiEnvironment()) {
      // App Inventor的WebViewString是单一值存储，这里用JSON存储所有键值对
      const existingData = this.getAllAiData();
      existingData[key] = serializedValue;
      window.AppInventor.setWebViewString(JSON.stringify(existingData));
    } else {
      localStorage.setItem(key, serializedValue);
    }
  }

  // 获取数据
  getItem(key: string): any {
    if (this.isAiEnvironment()) {
      const allData = this.getAllAiData();
      return allData[key] ? JSON.parse(allData[key]) : null;
    } else {
      const storedValue = localStorage.getItem(key);
      return storedValue ? JSON.parse(storedValue) : null;
    }
  }

  // 辅助方法：获取App Inventor中存储的所有数据
  private getAllAiData(): Record<string, string> {
    const storedString = window.AppInventor.getWebViewString();
    return storedString ? JSON.parse(storedString) : {};
  }

  // 环境判断复用
  private isAiEnvironment(): boolean {
    return !!window.AppInventor 
      && typeof window.AppInventor.getWebViewString === 'function' 
      && typeof window.AppInventor.setWebViewString === 'function';
  }
}

这里要注意：App Inventor的WebViewString只能存储单一字符串，不像localStorage支持多键值对。所以上面的代码把所有数据序列化成一个JSON对象存在WebViewString里，实现了类似多键值对的效果。

4. 在组件中使用存储服务 #

现在你可以在任意Angular组件中注入这个服务，不用关心底层是localStorage还是WebViewString：

import { Component } from '@angular/core';
import { CrossEnvStorageService } from './cross-env-storage.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="saveUserInfo()">保存用户信息</button>
    <button (click)="loadUserInfo()">加载用户信息</button>
  `
})
export class AppComponent {
  constructor(private storageService: CrossEnvStorageService) {}

  saveUserInfo(): void {
    this.storageService.setItem('currentUser', { name: 'Prabhu', role: 'Developer' });
  }

  loadUserInfo(): void {
    const user = this.storageService.getItem('currentUser');
    console.log('加载的用户信息:', user);
  }
}

这样就能完美实现桌面端用localStorage、App Inventor环境用WebViewString的需求了。

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