Question

所以我正在尝试使用角度优于JQuery，这有点令人费解。

在我的应用中，我想根据用户登录状态更改文本。如果他已登录，我想显示：我的帐户，如果没有人登录，我想显示：登录/注册。

在Jquery中很容易做到，不太确定NG的最佳方法。

HTML

<li>
    <a (click)="openLoginForm()">         
    <i class="fa fa-lock"></i> Login / Register</a> 
    <i class="fa fa-lock"></i> My Account</a> 
</li>

我想做的是检查变量：loggedIn，如果为true，则显示“我的帐户”，如果为false，则显示“登录/注册”。

我不是100％清楚如何通过Angular2做到这一点...

Answer 1

像这样的东西，当用户登录你的组件时设置isLogged：

<a (click)="openLoginForm()">
    <i class="fa fa-lock"></i> {{ isLogged ? "My Account" : "Login / Register" }}
</a>

这只是作为简单的绑定工作，它不会检测到更改，所以你可以做这样的事情：

<a (click)="openLoginForm()">
        <i class="fa fa-lock"></i> {{ isLoggedTittle }}
    </a>

并在组件中设置标题：

isLoggedTittle = logged ? "My Account" : "Login / Register";

Answer 2

Freshbm的回答是更好的解决方案，但我想澄清{{ isLogged ? "My Account" : "Login / Register" }}

中发生的事情

isLogged通常是true或false的布尔值，但可以是值

?是一张支票

"My Account"如果布尔值为true或值有效

:表示如果为false，undefined或null，请执行此操作

"Login / Register"如果布尔值为false或值为null或未定义

Answer 3

在您的情况下，理想的解决方案是使用ngIf：

<li>        
    <a (click)="openLoginForm()" *ngIf="!loggedIn"> 
        <i class="fa fa-lock"></i> Login / Register</a> 
    <a (click)="openMyAccountForm()" *ngIf="loggedIn"> 
        <i class="fa fa-lock"></i> My Account</a> 
</li>

如果loggedIn为真，则显示“我的帐户”部分，如果为“假”则显示“登录/注册”。

通过完全使用两个不同的锚标签，您可以完全改变每个人的行为方式，内部的图标等等。

如果用户已登录，则角度更改HTML

3 个答案: