angular2分享類的屬性

Question

我有應用程序組件（用於導航頭）和auth組件（用於登錄）。

他們既需要「isLoggedIn」屬性，它可以幫助應用程序將其「登錄」按鈕更改爲「註銷」，並使用身份驗證來阻止登錄後的登錄嘗試。

但我不知道我是否可以導出？從一個組件到另一個組件的屬性。

我知道我可以使用服務，但應用程序沒有適當的方法來訂閱用戶服務的映射數據。

如何讓他們分享「isLoggedIn」屬性？

以下是我的auth組件和具有用戶身份驗證服務的應用程序組件。

export class AuthComponent { 

    private username = ''; 

    private password = ''; 

    private remembered: boolean = false; 

    isLoggedIn: boolean; 

    constructor(private userAuthenticationService: UserAuthenticationService) {} 

    onsubmit() { 
    this.userAuthenticationService 
    .logIn({ username: this.username, password: this.password }) 
    .subscribe(response => { 
     this.isLoggedIn = response["success"]; 
    }); 
    } 

} 

//auth.component.html 
<div class="loginbox"> 
    <header>MAILBOY</header> 
    <form *ngIf="!isLoggedIn; else loggedInMessage"> 
    <input type="text" [(ngModel)]="username" name="username" id="email" placeholder="이메일 주소"/> 
    <input type="password" [(ngModel)]="password" name="password" id="password" placeholder="비밀번호"/> 
    <label for="remember"><input type="checkbox" id="remember" [checked]="remembered" (change)="remembered = !remembered" />이메일 저장</label> 
    <button class="login" (click)="onsubmit()">로그인</button> 
    <h3>처음이신가요?</h3><button class="register"><a href="/register">회원가입</a></button> 
    </form> 
    <ng-template #loggedInMessage> 
    <h1>환영합니다! 메일 수신 여부를 설정해주세요.</h1> 
    </ng-template> 
</div> 





export class AppComponent { 

    isLoggedIn = 'false'; 

    constructor(private userAuthenticationService: UserAuthenticationService) { } 

} 

//app.component.html 
<div class="headerSpacing"> 
     <nav> 
      <a routerLink="/home" routerLinkActive="active">홈</a> 
      <a *ngIf="isLoggedIn; else loggedInMessage" routerLink="/auth" routerLinkActive="active">로그인</a> 
        <ng-template #loggedInMessage> 
          <a (click)="logOut()">로그아웃</a> 
        </ng-template> 
      <a routerLink="/mail-setting" routerLinkActive="active">메일 수신 설정</a> 
     </nav> 
    </div> 
    <router-outlet></router-outlet> 

終於我的用戶認證服務

@Injectable() 
export class UserAuthenticationService { 

    headers = new Headers({ 
    'Content-Type': 'application/json' 
    }); 

    constructor(private http: Http) { } 

    /* 
    body: { 
     username, 
     password, 
    } 
    */ 
    logIn(user: Object) { 
    return this.http 
    .post('/auth/login', JSON.stringify(user), 
    { headers: this.headers }) 
    .map(data => { console.log(data); 
     return data.json() }); 
    } 

    private handleError(error: any): Promise<any> { 
    console.log('An error occurred ', error); 
    return Promise.reject(error.message || error); 
    } 

} 

Answer 1

你可以在這裏使用一個BehaviorSubject。

在UserAuthenticationService：

import { BehaviorSubject } from 'rxjs'; 

export class UserAuthenticationService { 
    private loggedIn = new BehaviorSubject(false); 

    // call this when you want to set loggedIn to true 
    login() { 
    this.loggedIn.next(true); 
    } 

    getIsLoggedIn() { 
    return this.loggedIn; 
    } 
} 

在應用程序或身份驗證組件，或者你需要的價值，你可以訂閱任何組件：

constructor(private userAuthenticationService: UserAuthenticationService) { 
    userAuthenticationService.getIsLoggedIn().subscribe(bool => { 
    // use bool value here, you can set local var 
    // this.isLoggedIn = bool; 
    }); 
}