Question

这是app.component.html

<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" routerLink="" ></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class='nav navbar-nav navbar-left'>
    <li><a *ngIf="loggedin" routerLink="/posts">Posts</a></li>
    <li><a routerLink="/profile">Profile</a></li>
    <li><a *ngIf="loggedin" routerLink="/settings">Settings</a></li>
    <li><a routerLink="/register">Register</a></li>
    <li><a routerLink="/login">Login</a></li>
    <li><a routerLink="/administration">Administration</a></li>
  </ul>
</div>
</div>
</nav>

<router-outlet></router-outlet>

authentication.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {User} from "../../interfaces/user.interface";

@Injectable()
export class AuthenticationService {
logging: boolean = false;

constructor(private http: HttpClient) { }

isloggedin() {
this.http.get('/loggedin')
  .toPromise()
  .then((data: any) => {
    console.log('data', data);
    if (data) {
      return true;
    } else {
      return false;
    }

  });
 }

}

app.component.ts

import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from 
"../../services/authentication/authentication.service";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Observable";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
 })
export class AppComponent implements OnInit{
title = 'twittscheR';
loggedin: any;

constructor(private http: HttpClient) {
 this.loggedin = AuthenticationService.isloggedin();
}
ngOnInit(){
 this.loggedin = this.isloggedin();
}
isloggedin() {
 return this.http.get('/loggedin');
}
}

我是Angular 5的新手。我如何实现，如果loggedin为true，导航栏中的某些元素只是可见的？甚至页面也会重新加载。登录功能正常，但ngIf不会更新导航栏中的变量

由于

Answer 1

在loggedin中创建BehaviorSubject<boolean>类型的变种authentication.service.ts：

loggedin: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

现在修改您的isLoggedIn() - 函数，这样，如果您获得数据，则将loggedin设置为true，如果没有数据则将其设置为false;

isloggedin() {
this.http.get('/loggedin')
  .toPromise()
  .then((data: any) => {
    console.log('data', data);
    if (data) {
      // login success
      this.loggedid.next(true);
    } else {
      // login fails
      this.loggedid.next(false);
    }

  });
 }

现在，您可以在组件中订阅loggedin varibale。为此，您应该在app.component.ts中注入您的authentication.service。

loggedin: boolean;

constructor(private http: HttpClient, private authService: AuthenticationService) {
 this.authService.loggedin.subscribe(v => this.loggedin = v);
}

现在，您可以在app.component.html中使用app.component.ts中的loggedin变量。

注意：要使此解决方案正常运行，您应该运行isLoggedIn()功能，例如点击登录按钮。

如果您需要更多解释，请告诉我并编写更大的教程。

Angular 5：隐藏元素（如果用户未经过身份验证）无法正常工作

1 个答案: