如何在Angular模板中访问其他文件中的常量？

Angular模板只能访问组件类暴露的公共属性/方法，直接在组件.ts里导入的Permissions常量不在模板的上下文范围内，所以无法直接调用。下面提供两种无需在组件类中定义ViewModel属性的解决方案：

方案1：使用自定义管道（兼容所有Angular版本） #

创建一个管道，直接返回权限常量，让模板通过管道获取常量的引用：

1. 新建permission-constant.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';
import { Permissions } from './permissions.model';

@Pipe({
  name: 'permissionConstant',
  standalone: true // 若使用独立组件则添加此配置；否则在NgModule的declarations中声明管道
})
export class PermissionConstantPipe implements PipeTransform {
  transform(): typeof Permissions {
    return Permissions;
  }
}

2. 在模板中使用管道访问常量：

<div *ngIf="(null | permissionConstant).System.SomeSettings.Update | hasPermission | async">
  <!-- 你的内容 -->
</div>

这里传递null作为管道的输入参数（管道必须接收一个输入），管道返回Permissions后，即可链式访问其内部属性。

方案2：使用注入令牌+模板inject函数（Angular 14+） #

将权限常量注册为全局注入令牌，然后在模板中直接注入使用：

1. 在permissions.model.ts中添加注入令牌定义：

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

export const Permissions = {
  System: {
    SomeSettings: {
      Update: "permissions.some-string",
    },
    SomeOtherSettings: {
      Update: "permissions.some-other-string",
    },
    AnySettings: {
      Update: "permissions.some-other-other-string",
    },
  },
  UserManagement: {
    Users: {
      Abc: "permissions.some-other-other-other-other-string",
      Def: "permissions.some-other-other-other-other-other-string",
    },
  },
};

export const PERMISSIONS = new InjectionToken<typeof Permissions>('Permissions', {
  providedIn: 'root',
  factory: () => Permissions
});

2. 在模板中使用inject函数获取常量：

<div *ngIf="inject(PERMISSIONS).System.SomeSettings.Update | hasPermission | async">
  <!-- 你的内容 -->
</div>

这种方法无需额外创建管道，直接利用Angular的依赖注入能力，在模板中获取全局注册的常量。

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