Angular2-Meteor *ngIf с Meteor.userId() не обновляется реактивно

Question

Я все еще довольно новичок в angular2-meteor и пробую простой компонент пользовательских кнопок входа. Я хочу отобразить кнопки "Регистрация" и "Вход", когда пользователь не вошел в систему, и отобразить кнопку "Выход из системы", когда пользователь вошел в систему. Казалось, что это должно быть довольно просто, но это не работает так, как я ожидал,

Вот мой компонент HTML:

<div *ngIf="!isLoggedIn()">
    <button class="btn btn-outline-primary btn-sm" (click)="goToLoginForm()">Log In</button>
    <button class="btn btn-success btn-sm">Sign Up</button>
</div>

<div *ngIf="isLoggedIn()">
    <button class="btn btn-outline-danger btn-sm" (click)="logout()">Log Out</button>
</div>

И вот моя машинопись:

import {Component} from "@angular/core";
import template from "./login-buttons.component.html";
import {Router} from "@angular/router";

@Component({
    selector: "login-buttons",
    template
})
export class LoginButtonsComponent {

    constructor(private router: Router) {}

    isLoggedIn(): boolean {
        return !!Meteor.user();
    }

    goToLoginForm(): void {
        this.router.navigateByUrl('/login');
    }

    logout(): void {
        Meteor.logout((error) => {
            if (error) {
                console.log(error);
            } else {
                this.router.navigateByUrl("/");
            }
        });
    }
}

Я уверен, что упускаю что-то действительно простое, но это ускользает от меня. Вся помощь приветствуется.

Answer 1

Может быть так много ответов на ваш вопрос. Вы можете использовать инъекцию пользователя, которая очень проста. сначала вы должны использовать Meteor.userId();

 isLoggedIn(): boolean {
            return !!Meteor.userId();
        }

этот ниже стандартный ответ

import {Component} from "@angular/core";
import template from "./login-buttons.component.html";
import {Router} from "@angular/router";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****

@Component({
    selector: "login-buttons",
    template
})
@InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
    user: Meteor.User; //<--*** add this ***
    constructor(private router: Router) {}

    isLoggedIn(): boolean {
        return !!Meteor.user();
    }

    goToLoginForm(): void {
        this.router.navigateByUrl('/login');
    }

    logout(): void {
        Meteor.logout((error) => {
            if (error) {
                console.log(error);
            } else {
                this.router.navigateByUrl("/");
            }
        });
    }
}

и ваш HTML должен быть таким

<div *ngIf="!user">
    <button class="btn btn-outline-primary btn-sm" (click)="goToLoginForm()">Log In</button>
    <button class="btn btn-success btn-sm">Sign Up</button>
</div>

<div *ngIf="user">
    <button class="btn btn-outline-danger btn-sm" (click)="logout()">Log Out</button>
</div>

Answer 2

Помощник isLoggedIn можно рассматривать как свойство, вызывать его из пользовательского интерфейса не имеет смысла. Другими словами, просто удалите скобки из ngIf. Вы можете изменить свой HTML, чтобы выглядеть так

<div *ngIf="isLoggedIn">
    <button class="btn btn-outline-danger btn-sm" (click)="logout()">Log Out</button>
</div>