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>