如何从ASP.NET aspx页面向Angular传递值？

除了HTTP Cookie，还有以下几种常用的传递方式：

1. 页面全局变量注入 #

在.aspx页面的<script>标签中定义全局变量，Angular应用初始化时直接读取这些变量，适合传递基础配置类数据。
示例：

<!-- 在.aspx页面的<head>或<body>中添加，放在Angular构建文件引入之前 -->
<script>
  window.appInitData = {
    apiBaseUrl: '<%= ConfigurationManager.AppSettings["ApiBaseUrl"] %>',
    currentUserId: '<%= User.Identity.Name %>',
    authToken: '<%= ServerSideAuthToken %>'
  };
</script>
<script src="dist/angular-app/main.js"></script>

Angular中读取：

// 在组件或服务中
const initData = (window as any).appInitData;
console.log(initData.apiBaseUrl, initData.currentUserId);

2. DOM元素自定义属性传递 #

在承载Angular应用的根DOM元素上设置自定义data-*属性，Angular启动时通过元素引用获取值。
示例：

<!-- .aspx页面中 -->
<div id="angular-app-root" 
     data-api-url="<%= ConfigurationManager.AppSettings["ApiBaseUrl"] %>"
     data-user-id="<%= User.Identity.Name %>">
</div>

Angular中读取：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  apiUrl: string;
  userId: string;

  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    const rootEl = this.elRef.nativeElement.parentElement;
    this.apiUrl = rootEl.getAttribute('data-api-url');
    this.userId = rootEl.getAttribute('data-user-id');
  }
}

3. URL查询参数传递 #

如果Angular应用是通过.aspx页面跳转加载的，可以在跳转URL中拼接查询参数，Angular通过路由模块读取。注意敏感数据不建议用这种方式，因为参数会暴露在URL中。
示例：
.aspx页面跳转逻辑：

Response.Redirect("angular-host-page.aspx?apiUrl=" + Server.UrlEncode(ConfigurationManager.AppSettings["ApiBaseUrl"]) + "&userId=" + Server.UrlEncode(User.Identity.Name));

Angular中读取：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  apiUrl: string;
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.apiUrl = this.route.snapshot.queryParamMap.get('apiUrl');
    this.userId = this.route.snapshot.queryParamMap.get('userId');
  }
}

4. 服务器端生成Angular环境配置脚本 #

直接在.aspx页面生成Angular可识别的环境配置脚本，替代Angular默认的environment.ts文件，适合需要动态调整环境变量的场景。
示例：

<script>
  window.angularEnv = {
    production: <%= ConfigurationManager.AppSettings["IsProduction"] %>,
    apiBaseUrl: '<%= ConfigurationManager.AppSettings["ApiBaseUrl"] %>',
    appKey: '<%= ServerSideAppKey %>'
  };
</script>

Angular中封装服务读取：

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

@Injectable({
  providedIn: 'root'
})
export class EnvService {
  production = (window as any).angularEnv.production;
  apiBaseUrl = (window as any).angularEnv.apiBaseUrl;
  appKey = (window as any).angularEnv.appKey;
}

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