如何从全局常量文件为HTML添加链接/href

有两种常用方式实现你的需求，具体如下：

方式一：直接通过属性绑定关联全局常量 #

这种方式无需额外方法，直接在HTML里绑定全局常量的链接值：

步骤1：在组件类中暴露全局常量（可选） #

若模板无法直接引用GlobalConstants，可在组件类定义属性指向它：

import { GlobalConstants } from 'src/app/ao-shared/global-constants';

export class PersonalperformanceEnhancedNonqualComponent extends AoLoadableComponent {
  // 暴露给模板使用
  public globalLinks = GlobalConstants.links;

  // 其余代码保持不变...
}

步骤2：在HTML中绑定href #

使用Angular属性绑定语法[href]直接关联链接：

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium sdps-m-around_medium">  
  <div class="ao-text-header">Account Overview has a new look</div>
  You can view your retirement accounts below, or 
  <a [href]="globalLinks.classicAO" target="_blank">go back to the classic experience.</a>
</div>

注：需要在新窗口打开则保留target="_blank"，当前窗口打开可省略。

方式二：使用点击事件调用已定义的方法 #

如果你倾向于用已写好的backToClassicAO()方法处理跳转，修改HTML如下：

修改HTML代码 #

将href设为javascript:void(0)避免默认跳转行为，绑定点击事件：

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium sdps-m-around_medium">  
  <div class="ao-text-header">Account Overview has a new look</div>
  You can view your retirement accounts below, or 
  <a href="javascript:void(0)" (click)="backToClassicAO()">go back to the classic experience.</a>
</div>

优化你的方法（可选） #

你的backToClassicAO()方法本身可行，若需在当前窗口打开，可替换写法：

public backToClassicAO(){
  // 新窗口打开（原写法）
  window.open(GlobalConstants.links.classicAO);
  // 当前窗口打开（可选）
  // window.location.href = GlobalConstants.links.classicAO;
}

额外建议 #

• 确认GlobalConstants的导入路径src/app/ao-shared/global-constants正确，避免模块导入错误。
• 若为跨域链接，需确认目标域名允许跳转或配置对应CORS规则。

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