Angular集成Optimizely：如何用Angular路由无刷新跳转测试页

当然可以做到！Optimizely默认的重定向会触发页面刷新，我们可以通过让Optimizely调用Angular的路由服务来实现无刷新跳转，具体步骤如下：

1. 关闭Optimizely的自动重定向功能 #

首先在Optimizely的实验设置里，把默认的“自动重定向到变体页面”选项关掉，选择“自定义代码”来手动处理跳转逻辑——这一步是核心，避免Optimizely自带的刷新行为。

2. 在Angular中把路由服务暴露到全局上下文 #

因为Optimizely运行在Angular的Zone之外，无法直接访问Angular的依赖注入系统，所以我们需要把Router实例挂载到全局window对象上，让外部代码能调用它：

在你的AppComponent里添加这段代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    // 将Angular Router暴露到全局window，供外部调用
    (window as any).angularRouter = this.router;
  }
}

如果是TypeScript项目，为了类型安全，可以在src/typings.d.ts里扩展Window类型：

interface Window {
  angularRouter: import('@angular/router').Router;
}

3. 在Optimizely中编写自定义跳转代码 #

回到Optimizely的实验自定义代码面板，写入以下逻辑：

// 检查Angular路由是否已初始化完成
if (window.angularRouter) {
  // 调用Angular路由的navigate方法，实现无刷新跳转
  window.angularRouter.navigate(['/variation1']);
} else {
  // 降级方案：如果Angular还没加载完成，用传统跳转作为备选
  window.location.href = '/variation1';
}

额外注意事项 #

• 确保Angular先初始化：如果用户首次加载页面时Optimizely代码先执行，可能会找不到angularRouter。可以在Optimizely里设置100-200ms的延迟，或者在Angular的main.ts里把初始化状态暴露到window，让Optimizely监听后再执行：

  // main.ts里添加
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(() => {
      (window as any).angularBootstrapped = true;
    })
    .catch(err => console.error(err));
  

  然后Optimizely代码可以改成轮询等待：

  const checkAngularReady = setInterval(() => {
    if (window.angularRouter && window.angularBootstrapped) {
      window.angularRouter.navigate(['/variation1']);
      clearInterval(checkAngularReady);
    }
  }, 50);
  // 设置超时，避免无限轮询
  setTimeout(() => clearInterval(checkAngularReady), 3000);
  

• 测试场景覆盖：要测试首次加载页面的跳转、已在original页面时的跳转等场景，确保无刷新行为正常工作。

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