Question

我正在为客户端工作api和angular 5 我需要更改导航按钮。当用户登录时（登录并注册可能会更改为注销按钮）...我保存了一个键，如登录本地存储，我检查此值是否设置...如果设置我更改按钮如下所示。此代码用户将重定向到主页但页眉组件（按钮条件）将不会更改...刷新后浏览器更改将生效：我该如何解决这个问题？

navbar component.ts：

import {Component, OnInit} from '@angular/core';
import {AuthUserService} from "../../services/auth-user.service";
import {Router} from "@angular/router";

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public is_logged : boolean;

  constructor(private http: AuthUserService,private  router : Router) {

  }

  ngOnInit() {

    let locals = localStorage.getItem('logged');

    if (locals == '1') {
      this.is_logged = true;
    }
  }

  logout() {
    this.is_logged = false;
    this.http.logout();
    this.router.navigate(['/']);

  }


}

navbar.html

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">comming soon</a>
    <a class="p-2 text-dark" href="#">comming soon</a>
    <a class="p-2 text-dark" href="#">comming soon</a>
    <a class="p-2 text-dark" href="#">about</a>
  </nav>
  <div *ngIf="is_logged;else otherc">
    <a class="btn btn-outline-primary" href="#" (click)="logout()">log out</a>

  </div>
  <ng-template #otherc>
    <a class="btn btn-outline-primary" href="#">sign up</a>
    <a class="btn btn-outline-success" href="#" routerLink="/login">log in</a>
  </ng-template>
</div>

和我的login.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Router} from "@angular/router";
import {User} from "../../models/user";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  user: User = new User();


  constructor(private http: HttpClient,
              private router: Router) {
  }

  ngOnInit() {
    // this.http.logout();
  }

  onSubmit({value, valid}) {
    if (!valid) {
      console.log("form in invalid!");
      return false;
    }
    let username = value.username;
    let password = value.password;

    this.http.post<any>("http://localhost:8000/login/", {username: username, password: password})
      .subscribe(
        user => {
          if (user && user.token) {
            console.log(user);
            localStorage.setItem('ut', JSON.stringify(user.token))
            this.router.navigate(['/']);
          }
        }
      );
  }
}

这是我的app.component html文件

<app-navbar>
</app-navbar>
<app-home></app-home>
<div class="container">
  <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Answer 1

我没有检查你的所有代码，我处理的方式是创建一个可以告诉我用户何时登录的服务，如果它已登录，它可以告诉我当前的用户。

然后，您可以使用隐藏属性和Angular数据绑定创建不同的容器，一个用于登录的情况，另一个用于未登录的容器，而不是具有复杂的if else逻辑。

一个例子（取自https://github.com/AlexITC/crypto-coin-alerts/blob/master/alerts-ui/src/app/app-navbar/app-navbar.component.html#L19）：

<ul [hidden]="isAuthenticated()" class="nav navbar-nav navbar-right">
  <li>
    <a routerLink="/new-account">{{'label.newAccount' | translate}}</a>
  </li>
  <li>
    <a routerLink="/login">{{'label.login' | translate}}</a>
  </li>
</ul>

<ul div [hidden]="!isAuthenticated()" class="nav navbar-nav navbar-right">
  <li>
    <button type="button" class="btn btn-link">{{getAuthenticatedUser()}}</button>
  </li>
  <li>
    <button type="button" class="btn btn-link" (click)="logout()">{{'label.logout' | translate}}</button>
  </li>
</ul>

以下是身份验证服务：https://github.com/AlexITC/crypto-coin-alerts/blob/master/alerts-ui/src/app/auth.service.ts#L14

角度5改变标题按钮在不同的条件

1 个答案: