Question

我对Angular和一般编程都很陌生，但我已经将一个非常简单的Angular应用程序与Facebook身份验证放在一起。然而，即使在阅读了angularfire2和Firebase文档之后，我也很难确切地根据身份验证状态确定在我的页面上显示某些HTML元素。

我想暂时避免路由/观看，因为我正在学习，并且需要花费一些时间才能更好地理解以实施。）就目前而言，我＆＃39;我试图通过在单个元素上使用* ngIf来保持简单。是否有一个变量我可以从组件html访问以检查用户是否已登录？

正如您在我的代码中看到的那样，当我使用* ngIf检查视图中显示的asynced user.uid变量时，它现在正在工作。但是，我试图这样做，以便我的应用程序组件导出中的addLike点击功能仅在用户登录时执行，如果没有，它将执行其他操作。如何在代码中添加这种条件。我究竟如何访问授权状态并在导出类函数中使用结果？

以下是我的组件HTML和TS的代码：

HTML

＆＃13;

<div style="text-align:center">
    <div class="row">
        
        
        <div *ngIf="!(user | async)?.uid" class="col-md-12 text-right">
        <button class="btn btn-primary" (click)="fblogin()">
            <i class="fa fa-facebook" aria-hidden="true"></i>
            Sign in</button>
        </div>
        
        <div *ngIf="(user | async)?.uid" class="col-md-12 text-right">
            <span class="text-muted">You are Logged in!</span>
        <button class="btn btn-md btn-basic" (click)="logout()">Logout</button>
        </div>

    
    </div>
    
    
    
    
    <div class="row">
      <div class="col-md-12">
        <h1>
        Welcome to {{title}}
      </h1>
        </div>
  </div>


       
      

      
     





    <div class="row" *ngFor="let song of songs | async "> 

      <div class="col-md-12" *ngIf="song.np == true">
      <h4 class="dark">Now Playing: "{{song.title}}" - {{song.artist}}</h4>
      </div>
 
</div>



<h4>Tonight's Songs: </h4>
    
    
    
</div>
<div class="tablediv">
<table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Artist</th>
        <th>Likes</th>
      </tr>
    </thead>
    <tbody>
  <tr *ngFor="let song of songs | async |  sortBy: 'likes' ; let i  = index"
[style.background]="song.np == true ? 'lightblue': 'white'"

  >

<td >{{ song.title }}</td>
<td >{{ song.artist }}</td>
<td [style.min-width]="'100px'" >{{ song.likes }}
 
            <i class="fa fa-heart-o" aria-hidden="true"  *ngIf="song.likes < 1"></i>
         <i class="fa fa-heart" aria-hidden="true" *ngIf="song.likes >= 1"></i>
            <i class="fa fa-plus" aria-hidden="true" (click)="addLike(song.$key, song.likes)"  ></i>
</td>

  </tr>
  </tbody>
  </table>
</div>

 <div class="hidden"> {{ (user | async)?.uid }} </div>

<button class="btn btn-md btn-basic" (click)="testAction()">Test</button>

＆＃13;

TS

＆＃13;

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { AngularFireAuthModule,AngularFireAuth} from 'angularfire2/auth';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Subject } from 'rxjs/Subject';
import {Observable} from 'rxjs/Rx';

import * as firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})


export class AppComponent {
    title = 'Oxcord';
    ngOnInit() {
    console.log("Dammit");
    }

user: Observable<firebase.User>;
  songs: FirebaseListObservable<any[]>;
  sizeSubject: Subject<any>;
   
   constructor(private db: AngularFireDatabase, public afAuth: AngularFireAuth) {
    this.songs = db.list('/songs');
    this.user = afAuth.authState;
   
   
  }
  

addLike(id: string, likes: number): void {

 this.db.list('/songs/').update(id,{ likes: likes +1 });
}
removeLike(id: string, likes: number): void {

 this.db.list('/songs/').update(id,{ likes: likes -1 });
}



fblogin() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }


  glogin() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.auth.signOut();
  }

testAction(){


}





}

＆＃13;

如何使用Angular 4，Firebase和Angularfire2监控身份验证？

0 个答案: