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可以作为属性来处理，从UI调用它是没有意义的。换句话说，只需从ngIf中删除方括号即可。您可以将html修改为如下所示

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