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

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并对其进行测试时，以上都没有呈现，当我检查开发者控制台时，我收到的消息基本上告诉我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中显示。