如何将WordPress根URL传递给预渲染的Angular应用？

方法1：修正全局变量读取逻辑 #

因为Angular SSG会先做服务器端预渲染，此时window对象不存在，直接读取会报错。需要先判断当前运行环境：

• 在WordPress插件或模板中输出全局变量：

  <script>
    window.wpRootUrl = '<?php echo get_site_url(); ?>';
  </script>
  

• 在Angular组件中，借助PLATFORM_ID区分浏览器环境后读取：

  import { Component, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    wpRootUrl: string | null = null;
  
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
      if (isPlatformBrowser(this.platformId)) {
        this.wpRootUrl = (window as any).wpRootUrl;
      }
    }
  }
  

方法2：通过meta标签传递值 #

这种方式更规范，避免全局变量污染：

• 在WordPress端输出meta标签：

  <meta name="wp-root-url" content="<?php echo get_site_url(); ?>">
  

• 在Angular组件中，浏览器环境下读取meta标签内容：

  import { Component, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    wpRootUrl: string | null = null;
  
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
      if (isPlatformBrowser(this.platformId)) {
        const metaTag = document.querySelector('meta[name="wp-root-url"]');
        this.wpRootUrl = metaTag?.getAttribute('content') || null;
      }
    }
  }
  

方法3：预渲染时动态注入固定URL（适用于静态部署场景） #

如果你的WordPress站点URL固定，可在预渲染Angular时直接注入：

• 修改Angular项目的angular.json，在server配置中添加自定义依赖：

  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "extraProviders": [
        {
          provide: 'WP_ROOT_URL',
          useValue: "https://your-wordpress-site.com"
        }
      ]
    }
  }
  

• 在Angular组件中直接注入使用：

  import { Component, Inject } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor(@Inject('WP_ROOT_URL') public wpRootUrl: string) {}
  }
  

注意：如果WordPress站点URL是动态变化的（比如多站点场景），前两种浏览器端读取的方法更合适。

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