Question

我有一个observable，我从我的身份验证服务中获取，告诉我用户是否已登录。我希望某些元素在我的标题中可见，具体取决于我的用户访问的页面。我创建了两个返回布尔值的函数。

如果用户未登录，则应该可以看到一个元素。如果用户在登录页面中，那么元素不应该是可见的。

isLoggedIn$: Observable<boolean>;

  ngOnInit() {

    this.isLoggedIn$ = this.authService.isLoggedIn;



  }

  shouldShowBlueBanner(): boolean {

    if (this.pageName === '/login') {
      return false;
    }
  }

  shouldShowRegisterLink(): boolean {
    if (!this.isLoggedIn$) {

      return true;
    } else {
      return false;
    }
  }


}

  <div id="registerLink" *ngIf="shouldShowRegisterLink">
    <a [routerLink]="['/register']" >

      Register</a>
  </div>
  <app-nav-menu></app-nav-menu>
    <div id="blueheader"  *ngIf="shouldShowBlueBanner">
    </div>
</div>

如何根据我的功能的返回值显示/隐藏Div？

Answer 1

您只能使用一个名为isLoggedIn的变量来执行此操作。用户登录后，该值将更改为true，*ngIf将隐藏第一个带有否定!的元素，并显示其他元素而不会出现否定。

isLoggedIn$: Observable<boolean>;

  ngOnInit() {

    this.isLoggedIn$ = this.authService.isLoggedIn;



  }
}

  <div id="registerLink" *ngIf="!isLoggedIn">
    <a [routerLink]="['/register']" >

      Register</a>
  </div>
  <app-nav-menu></app-nav-menu>
    <div id="blueheader"  *ngIf="isLoggedIn">
    </div>
</div>

Answer 2

您可以使用ngIf else

示例：

cookbook_name

Answer 3

您可以将* ngIf指令与函数一起使用。

  *ngIf="isActive()"

根据功能显示隐藏元素

3 个答案: