我在登录时无法刷新的组件遇到困难.

该组件是navbar.component,其中包含指向我的页面/组件的链接.在它上面,有一个"登录"链接,呈现login.component,我可以在其上提供用户名和密码,然后单击登录按钮.login.component使用user.service,它使用login.component提供的用户名和密码调用后端,存储收到的令牌并重定向到'/'.

此时,应该隐藏navbar.component上的"登录"链接并显示"注销"链接,但在我单击导航栏上的其他链接之前没有任何反应.

2个链接如下:

<a [hidden]="userService.isLoggedIn" [routerLink]="['Login']">Login</a>
<a [hidden]="!userService.isLoggedIn" (click)="userService.logout();" href="javascript:void(0)">Logout</a>

我理解存储令牌并从user.service重定向不会触发更改检测,并且我的属性userService.isLoggedIn不是可观察的,所以我知道我遗漏了一些东西,但不确定该方法是什么/应该是什么.

我已经尝试注入ApplicationRef来调用tick()方法,希望这会触发更改检测,但是失败了.

我应该使我的属性userService.isLoggedIn是一个可观察的吗？

模板

<pre *ngIf="isAdmin()">{{email|json}} - {{user|json}}</pre>

成分

isAdmin() {
    console.log('isAdmin: ', this.bcAuthService.isAdmin());
    return this.bcAuthService.isAdmin();
}

服务

isAdmin() {
    return this.admins.includes(localStorage.getItem("email"));
}

问题

组件中的函数会多次打印。为什么？这是错误的吗？什么是更好的方法？

我的应用程序结构如下所示：

ts：

...
export class TodoListComponent {

    get sortedTodos():ITodo[] {
            console.log(this.counter++);
            ...
        } 
    ....

的HTML：

  <div class="todo-item" *ngFor="let todo of sortedTodos" [class.completed]="todo.completed">
        <todo-list-item [todo]="todo" class="todo-item" (deleted)="onTodoDeleted(todo)"
                        (toggled)="onTodoUpdated($event)"></todo-list-item>
    </div>

如果我启动应用程序，我会在控制台中看到：

1
2
3
4
5
6

我真的对此行为感到困惑。对我来说，它看起来很奇怪，我认为它可能会导致错误和性能问题。请解释为什么执行6！一次加载页面的次数。

我不确定我是否提供了主题中所有需要的信息。随意提出其他要求。也可以找到所有代码库bitbucket回购链接

聚苯乙烯

完整的ts文件内容：

import {Component, Input, Output, EventEmitter} from "@angular/core"

import {ITodo} from "../../shared/todo.model";
import {TodoService} from "../../shared/todoService";

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent {
    @Input() todos:ITodo[];

    @Output() updated:EventEmitter<ITodo> = new EventEmitter<ITodo>();
    @Output() deleted:EventEmitter<ITodo> …