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与Meteor.userId（）没有被动更新

2 个答案: