Angular 4 在 ngIf 中使用公共(public)静态只读字符串

Question

我有一个名为 UserRoles 的类，定义如下:

export class UserRoles
{
    public static readonly MODERATOR  = "moderator";
    public static readonly SPONSOR    = "sponsor";
    public static readonly BASE_USER  = "user";
} 

我有一个名为 MenuComponent 的组件，因此在 .ts 文件中，我 import { UserRoles } from "../../../models/userRoles"; ，在该组件的 .html 文件中，我有:

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <ul *ngIf="currentUser.role == UserRoles.BASE_USER" class="nav navbar-nav">
            <!-- NOTE: whatever routerLinks you create here need to be added and handled properly in routing.ts -->
            <li><button class="menuButton" routerLink="leaderboard">Leaderboard</button></li>
            <li><button class="menuButton" routerLink="feed">Feed</button></li>
            <li><button class="menuButton" routerLink="score">Score</button></li>
            <li><button class="menuButton" routerLink="my-posts">My Posts</button></li>
            <li><button class="menuButton" routerLink="create-posts">Create Posts</button></li>
            <li><button class="menuButton" routerLink="edit-posts">Edit Posts</button></li>
        </ul>
        <ul *ngIf="currentUser.role == UserRoles.MODERATOR" class="nav navbar-nav">
            <!-- NOTE: whatever routerLinks you create here need to be added and handled properly in routing.ts -->
            <li><button class="menuButton" routerLink="flagged-users">Flagged Users</button></li>
            <li><button class="menuButton" routerLink="flagged-posts">Flagged Posts</button></li>
            <li><button class="menuButton" routerLink="flagged-comments">Flagged Comments</button></li>
            <li><button class="menuButton" routerLink="my-messages">My Messages</button></li>
            <li><button class="menuButton" routerLink="create-messages">Create Messages</button></li>
        </ul>
        <ul *ngIf="currentUser.role == UserRoles.SPONSOR" class="nav navbar-nav">
            <!-- NOTE: whatever routerLinks you create here need to be added and handled properly in routing.ts -->
            <li><button class="menuButton" routerLink="balance">Balance</button></li>
            <li><button class="menuButton" routerLink="popular-users">Popular Users</button></li>
            <li><button class="menuButton" routerLink="my-advertisements">My Advertisements</button></li>
            <li><button class="menuButton" routerLink="create-advertisements">Create Advertisements</button></li>
        </ul>
    </div>
</nav>

当我启动 ng serve 并对其进行测试时，以上都没有呈现，当我检查 Developer Console 时，我收到的消息基本上告诉我 UserRoles 未定义。

对于 UserRoles 类，我应该在此处或 app.module.ts 中做什么？

Answer 1

模板中的表达式期望使用组件类的变量和方法。为了访问模板中 UserRoles 的值，您可以将该类分配给组件类的成员变量:

import { Component } from '@angular/core';
import { UserRoles } from "./user-roles.model";

@Component(
    ...
)
export class UserComponent {
    public UserRolesClass = UserRoles;
    ....
}

并在模板中使用该变量:

<ul *ngIf="currentUser.role == UserRolesClass.BASE_USER" class="nav navbar-nav">

该技术显示在 this stackblitz 中.