Question

我有以下的Typescript代码：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})

export class HeaderComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {

    var isLoggedIn = false;

  }

}

其中包含以下Html模板：

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" [routerLink]="['/']">
   Site Name
  </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav pull-right">
            <li routerLinkActive="active"><a [routerLink]="['/login']">Login</a></li>
            <li routerLinkActive="active"><a [routerLink]="['/sign-up']">Sign Up</a></li>
            <li routerLinkActive="active" *ngIf="isLoggedIn"><a [routerLink]="['/logout']">Logout</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
    </ul>
    </div>
</div>

正如您可以看到在最后一个菜单链接（注销）中我是否使用*ngIf来显示用户是否登录的链接。目前我将该值硬编码为false，如果我将其更改为true，则链接仍然由于某种原因而隐藏。

请注意我正在学习Angular2。

Answer 1

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})

export class HeaderComponent implements OnInit {

  isLoggedIn = false;

  constructor(private authService: AuthService) { }

  ngOnInit() {



  }

}

隐藏菜单链接，具体取决于变量是true还是false

1 个答案: