Question

我的app.component.ts中有导航栏，ngIf，所以登录后我应该看到退出按钮，但是没有发生，因为app.component没有检测到更改

app.component.html：

<div>
  <nav class='navbar navbar-default'>
    <div class='container-fluid'>
      <a class='navbar-brand'>{{title}}</a>
      <ul class='nav navbar-nav'>
        <li><a [routerLink]="['/welcome']">Home</a></li>
        <li><a [routerLink]="['/apartments']">Apartments List</a></li>
      </ul>
      <div *ngIf="currentUser">
      <p class="navbar-text navbar-right"><button (click)="logout()" class="btn btn-default">Log-out</button></p>
      <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">{{currentUser}}</a></p>
    </div>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

app.component.ts：

import {Component, OnChanges} from '@angular/core';
import {AuthService} from "./shared/auth.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[AuthService]
})
export class AppComponent {
  title = 'Product List App';
  currentUser: string;
  constructor(private _authService: AuthService) {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  }
  logout() {
    this._authService.logout();
    this.currentUser = undefined;
  }
}

当我执行登录时，我执行：localStorage.setItem('currentUser',JSON.stringify(user));

但我的app.component未检测到currentUser已被更改，因此我无法看到登录的用户名和注销按钮。（我需要刷新才能按顺序查看页面）如何在不将登录功能放入我的app.component.ts？

的情况下解决这个问题

Answer 1

我在手机上，因此语法可能略有偏差。

如果您创建了登录服务：

@Injectable()
export class LoginService {
    public uname = new Subject<any>():
    public uname$ = this.uname.asObservable();

    public publishUsername(data: any) {
        this.uname.next(data);
}

然后在你的构造函数中：

constructor(private lin: LoginService) {
    this.lin.uname$.subscribe(
        (data) => {
            this.currentUser = data;
        }
}

Answer 2

当您登录时，您正在进行的是在本地存储中设置值。这不会触发任何更改。刷新浏览器时，它会在构造函数中获取此新值并进行渲染。

登录时需要设置currentUser属性。

Angular 4检测app.component

2 个答案: