Angularjs 4 - 需要刷新 display/hide 指令

Question

我在用户未登录时隐藏导航栏时遇到问题（在 public 视图上），我检查项目 currentUser 是否存在于 localStorage 上，然后我使用 *ngIf 在 html 模板上到 show/hide.

刚开始登录的时候看不到导航栏，但是刷新页面后显示，退出时也是一样，一开始显示导航栏，刷新页面后就没有了。

有我的app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {

    userLogged = JSON.parse(localStorage.getItem('currentUser'));

    ngOnInit() {
        console.log(this.userLogged);

    }

}

还有我的app.component.html

<!-- main app container -->
<div class="jumbotron">
    <div class="container">
        <ng-navbar *ngIf="userLogged"></ng-navbar>
        <div class="col-sm-12">
            <alert></alert>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

如果您需要更多信息，请直接询问，这是我的第一个 Angularjs 4 问题，我不知道要确切显示什么。

Answer 1

试试这个：

<ng-navbar *ngIf="userLogged()"></ng-navbar>

userLogged() { return JSON.parse(localStorage.getItem('currentUser')) };

Angularjs 4 - 需要刷新 display/hide 指令

Angularjs 4 - Need to refresh for display/hide directive

javascript

angularjs

angularjs-ng-if