Question

我是新手。基本上，我的项目由几个部分组成。第一个是登录，没有显示菜单，其余组件是（如果用户已登录）。如何知道用户是否已登录？这很容易，因为登录组件登录时，它存储在本地存储“ iduser” 中。

接下来您将看到的逻辑是我在app.component.ts中执行的。

import { Component,EventEmitter  } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

    showMenuEmitter = new EventEmitter<boolean>();
    showMenu: boolean;
    constructor(
            private router : Router
        ){
            console.log(this.router.url);

        if(!localStorage.getItem("idusuario")){
            this.showMenuEmitter.emit(true);
            this.router.navigate(["/"]);

        }

        else if(localStorage.getItem("idusuario") && this.router.url=="/"){
            this.router.navigate(["avance_entregables"]);
            this.showMenuEmitter.emit(false);
            console.log( this.showMenu );
        }
        this.showMenuEmitter.subscribe(
        mostrar => this.showMenu = mostrar
        );

    }
}

在这里，我正在尝试确定是否显示菜单。在app.component.html中，我想隐藏它或显示它。

<menu *ngIf="showMenu"></menu>
<router-outlet></router-outlet>

我从未使用过EventEmitter，但我一直在寻找示例，显然这是最佳实践。我在做什么错了？

Answer 1

将this.showMenuEmitter.emit(true/false);更改为

this.showMenu=true or false;  // Add this line with true or false value

并完全删除showMenuEmitter-因为我们通常使用事件与其他组件通信，但通常不使用发出事件的组件内部

更新（评论）

将以下代码添加到构造函数中（我们将对路由器的任何更改和showMenu的刷新状态进行适当的预订-添加Event以便在文件头处导入语句）

router.events.subscribe((event: Event) => {
    this.showMenu=true;  // or true
    if(localStorage.getItem("idusuario")) this.showMenu=false;  // or false
});

Answer 2

使用“主题”和“可观察”是更常见的做法。 This article说明了更多方法。通常，除非人们通过（）从子组件中输出值，否则他们不会使用eventEmitter，但是确实会发生这种情况，我不会说对与错。你实际上有一个很酷的例子:) 返回Observable，您可以执行if *ngIf="obsName | async"，当观察值（主题）改变时，它会根据需要显示/隐藏菜单，而无需手动调整布局的状态。

Answer 3

您需要共享服务。

1）创建shared.service.ts（类似于简单服务）

2）在此服务中，将变量定义为BehaviorSubject

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private _currentAuth = new BehaviorSubject(false);
   currentAuth= this._currentAuth.asObservable();

  constructor() { }

  changeAuth(auth: boolean) {
    this.currentAuth.next(auth)
  }

}

3）将该服务添加为所有组件（app.module.ts）通用的模块中的提供程序

4）现在，您可以在组件中设置共享服务变量：

this.service.changeAuth(true);

，您可以订阅currentAuth值以获取值：

 this.service.currentAuth.subscribe(serviceValue => this.showMenu = serviceValue );

所有组件的服务验证值均相同。您可以轻松检查用户状态。在shared.service.ts中，您可以创建checkStatus（），从中您可以从本地主机的另一个服务进行订阅

显示/隐藏我的菜单（如果用户已经登录）

3 个答案: