Angular 11中如何将index.html的请求返回值传递给main.ts并触发执行

根据你需要「拿到AJAX响应后再触发main.ts执行」的需求，推荐优先使用第一种方案，也提供已启动Angular后传值的方案供选择：

方案1：等待AJAX请求完成后再启动Angular应用 #

该方案完全符合你要先拿响应再执行main.ts逻辑的要求，实现步骤如下：

1. 调整main.ts代码，把Angular引导逻辑封装成全局可调用方法，支持接收外部参数：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 声明全局方法的TS类型
declare global {
  interface Window {
    bootstrapAngular: (ajaxResponse: any) => void;
  }
}

// 将引导方法挂载到window对象，供index.html全局调用
window.bootstrapAngular = (ajaxResponse) => {
  // 将响应值注册为全局注入令牌，Angular全链路都可以直接注入使用
  platformBrowserDynamic([
    { provide: 'AJAX_RESPONSE', useValue: ajaxResponse }
  ]).bootstrapModule(AppModule)
    .catch(err => console.error(err));
};

// 注意：必须删掉main.ts默认自带的platformBrowserDynamic().bootstrapModule(AppModule)自动引导代码，否则Angular会提前启动

2. 修改index.html中AJAX请求的成功回调，调用上述全局方法传递响应值：

function makeAjaxRequest(val) {
  debugger;
  var dataO = {
    email:val
  };
  var json = JSON.stringify(dataO);
  $.ajax({
    type: "POST",
    url: "https://google.com",
    data: json,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      // 调用main.ts中挂载的引导方法，传入响应值启动Angular
      if(window.bootstrapAngular) {
        window.bootstrapAngular(msg);
      } else {
        // 兼容资源加载顺序问题，重试一次
        setTimeout(() => window.bootstrapAngular(msg), 100);
      }
    }
  });
}

3. 如果你需要在Angular组件/服务中使用该响应值，直接注入即可，示例如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(@Inject('AJAX_RESPONSE') private ajaxResponse: any) {
    console.log('获取到的AJAX响应值：', this.ajaxResponse);
  }
}

方案2：Angular已启动，仅需传递AJAX响应到Angular内部 #

如果你不需要等待AJAX完成再启动Angular，只是要把响应值传到Angular内部，可以用自定义事件通信实现：

1. 在Angular侧（可写在main.ts或任意业务组件中）监听自定义事件：

window.addEventListener('ajaxRequestSuccess', (event: CustomEvent) => {
  const response = event.detail;
  // 此处写你需要处理响应值的逻辑即可
  console.log('收到AJAX响应：', response);
});

2. 修改index.html的AJAX成功回调，触发自定义事件传值：

success: function(msg) {
  const successEvent = new CustomEvent('ajaxRequestSuccess', { detail: msg });
  window.dispatchEvent(successEvent);
}

注意事项 #

• 要确保jQuery在index.html中的加载顺序早于你定义的makeAjaxRequest函数，避免$未定义报错
• 方案1必须删除原main.ts中默认的自动启动代码，否则会出现Angular重复启动的问题

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