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>