angular2 teilen Klasse Eigenschaften

Question

Ich habe App-Komponente (für Nav-Header) und Auth-Komponente (für die Anmeldung).

Sie brauchen beide „isLoggedIn“ Eigenschaft, die nützlich sein können für App seine „Login“ -Button zu ändern „Logout“ und für Auth-Anmeldeversuch nach der Anmeldung zu blockieren.

Aber ich weiß nicht, ob ich exportieren kann? eine Eigenschaft von einer Komponente zur anderen.

Ich weiß, dass ich Service, aber app nicht die richtige Methode hat verwenden können Benutzer-Service der abgebildeten Daten abonnieren.

Wie kann ich sie machen gemeinsam nutzen „isLoggedIn“ Eigentum?

Hier sind meine Auth Komponente und App-Komponente mit benutzerAuthentifizierungsDienst.

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> 

endlich meinen Benutzerauthentifizierungsdienst

@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

können Sie einen BehaviorSubject hier verwenden.

In 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; 
    } 
} 

In App oder Auth Komponente oder jede Komponente, die Sie den Wert benötigen, können Sie ihn abonnieren:

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