Angular2-Meteor *ngIf with 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>

Angular2-Meteor *ngIf with Meteor.userId() 没有反应更新

Angular2-Meteor *ngIf with Meteor.userId() not updating reactively

meteor

angular2-meteor

angular