Angular2流星* ngIf與Meteor.userId（）沒有更新反應

我還是相當新的angular2流星，我正在嘗試一個簡單的自定義登錄按鈕組件。我想在沒有用戶登錄時顯示註冊和登錄按鈕，並在用戶登錄時顯示註銷按鈕。它似乎應該非常簡單，但它不起作用，因爲我期待。Angular2流星* ngIf與Meteor.userId（）沒有更新反應

這裏是我的組件的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("/"); 
      } 
     }); 
    } 
}

我敢肯定，我失去了一些東西很簡單，但它躲開我。所有的幫助表示讚賞。

來源

2017-02-05 Keith McQueen

讓我知道這個解決方案是否適合你:) –

可以有這麼多的答案給你的問題。你可以使用非常簡單的用戶注入。首先你應該使用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>

來源

2017-02-05 16:13:01

謝謝，阿米特。我切換到Meteor.userId（），行爲是一樣的。有趣的是，我注意到如果我在登錄/註銷後單擊頁面，然後看到更改，但它不會自動發生。在Chrome和Safari中都試過。我知道@InjectUser技巧，但我不想僅僅爲此導入整個包。 –

讓我給你幾個提示。這會幫助你。 @ user3101499你不應該在* ngIf裏面使用函數。因爲* ngIf自動重新運行以檢測內部內容的變化，所以你的函數將繼續每秒運行以檢測變化。這會降低您的應用性能。所以使用第二種方法。它會工作，如果你想在meteor.js –

工作Meteor.userId函數不能在HTML渲染部分正常工作，你會非常需要這個包。我認爲爲什麼它在你的情況下造成問題。如果你在角2流星中遇到任何其他問題，你可以直接聯繫我:) –

助手isLoggedIn可以被視爲財產，從UI調用它doesn沒有道理。換句話說，只需從ngIf中刪除括號即可。你可以修改你的html看起來像這樣

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

來源

2017-02-05 23:12:58 Mikkel

Angular2流星* ngIf與Meteor.userId（）沒有更新反應

回答

相關問題