Ionic/Angular中如何让组件访问index.html全局变量

这个问题我之前在项目里也碰到过，要让组件拿到index.html里定义的全局变量，其实有两种实用的方式，下面给你一步步拆解：

方法1：直接通过window对象访问（简单快速） #

你在index.html的<script>里定义的全局变量会自动挂载到浏览器的window对象上，不过因为Angular用TypeScript，直接用window会有类型报错，所以得先声明一下：

1. 在组件.ts文件顶部，先声明window变量：

declare var window: any;

2. 在组件类里定义一个属性，然后在生命周期钩子（比如ngOnInit）里赋值：

import { Component, OnInit } from '@angular/core';

declare var window: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage implements OnInit {
  myVar: string;

  ngOnInit() {
    // 从window对象获取全局变量
    this.myVar = window.myVar;
  }
}

3. 现在就能在组件HTML里直接用{{myVar}}显示值了：

<p>全局变量的值：{{myVar}}</p>

方法2：通过Angular依赖注入访问（更符合框架规范） #

如果你不想直接操作全局window，想遵循Angular的依赖注入风格，可以用注入令牌的方式：

1. 先创建一个注入令牌（可以放在单独文件，比如window.token.ts，也可以直接写在组件里）：

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

export const WINDOW = new InjectionToken<Window>('Global Window Object', {
  providedIn: 'root',
  factory: () => window
});

2. 在组件里注入这个令牌，再获取全局变量：

import { Component, OnInit, Inject } from '@angular/core';
import { WINDOW } from './window.token'; // 注意路径要正确

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage implements OnInit {
  myVar: string;

  constructor(@Inject(WINDOW) private window: Window) {}

  ngOnInit() {
    // TypeScript不知道window上有myVar，所以需要断言类型
    this.myVar = (this.window as any).myVar;
  }
}

3. 同样，组件HTML里用{{myVar}}就能正常显示了。

重要注意事项 #

• 脚本加载顺序：一定要把定义全局变量的<script>放在<app-root>标签之前（比如<head>里或者<body>最开头），不然Angular初始化时可能还没加载到这个变量，会拿到undefined。
• 全局变量的弊端：尽量少用全局变量，它会污染全局作用域，容易引发命名冲突。如果是共享数据，更推荐用Angular的服务（Service）来实现，这是更优雅的方案。
• 类型安全优化：如果想更严谨，可以扩展Window接口，不用断言成any：

declare global {
  interface Window {
    myVar: string;
  }
}

这样直接写this.myVar = window.myVar;就不会有类型报错了。

内容的提问来源于stack exchange，提问作者Uraquitan Matova Ura Kombat