路由器 - 插座組件中的輸入變量

我想知道，如果你們現在有一種方法讓@Input + ngOnChanges（）組合或其他組件在內部執行相同的操作。路由器 - 插座組件中的輸入變量

基本上，我在AppComponent和我的模板設置logged: boolean可變我：

<router-outlet></router-outlet> 
<login [logged]="logged"></login>

我想是能夠手錶，在路由器 - 一個組件內logged變量所以我只在記錄設置爲true時纔在這裏創建東西。

我試圖把<router-outlet [logged]="logged"></router-outlet>，但這並不奏效，並且在服務中使用變量似乎不適合ngOnChanges（）手錶。

有沒有人有想法？謝謝！

來源

2016-09-01 Guigui

路由器添加的組件不能參與綁定。您需要使用共享服務。見https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

是的，我知道這種方式，但我不能這樣做，因爲我必須「看」變量。我需要在路由器中使用我的組件來等待用戶登錄。我在LoginService中有一個記錄變量，我可以在任何地方訪問，但我不知道如何等待他成爲真實的。 – Guigui

然後使用observables - 也在上面鏈接的教程中演示。 –

創建具有可觀察到的服務訂閱

import { Injectable } from '@angular/core'; 
 
import { Observable } from 'rxjs/Rx'; 
 
import { ReplaySubject } from 'rxjs/ReplaySubject'; 
 

 
@Injectable() 
 
export class UserSessionService { 
 

 
    private _loggedIn: ReplaySubject<boolean> = new ReplaySubject<boolean>(); 
 

 
    public logUserIn() { 
 
    this._loggedIn.next(true); 
 
    } 
 

 
    public logUserOut() { 
 
    this._loggedIn.next(false); 
 
    } 
 

 
    public getUserLoggedInObs(): Observable<boolean> { 
 
    return this._loggedIn.asObservable(); 
 
    } 
 

 
}

服務添加到父模塊（要小心，如果將其添加到多個模塊，你可能會得到不同的實例不同的loggedIn值這項服務）

import { NgModule } from '@angular/core'; 
 
import { UserSessionService } from 'wherever/service/is/located'; 
 

 
@NgModule({ 
 
    providers: [ UserSessionService ] 
 
}) 
 

 
export class AppModule { }

在你的控制器做類似

public userLoggedInObs: Observable<boolean>; 
 
constructor(private userSessionService: UserSessionService) { 
 
    this.userLoggedInObs = userSessionService.getUserLoggedInObs() 
 
}

的在您的視圖中，您可以添加

<div *ngIf="userLoggedInObs | async"> 
 
    User is logged in 
 
</div> 
 
<div *ngIf="!(userLoggedInObs | async)"> 
 
    User isn't logged in 
 
</div>

當您調用服務時，它將向當前訂閱的所有組件進行廣播，然後將進行更新。

來源

2017-09-13 13:19:14

我想說的最簡單方法是使用一個服務，這個服務添加到您的孩子

@Injectable() 
export class LoginService { 
    private logged:boolean; 

    setlogged(data:boolean) { 
     this.logged = data; 
    } 

    isLogged() { 
     return this.logged; 
    }

或使用localStorage的

set isLogged(value: boolean) { 
     localStorage.setItem('logged', value); 
    } 

    get isLogged(): boolean { 
     return <boolean> localStorage.getItem('logged')); 
    } 
}

在您的組件：

constructor(private loginService:LoginService) {} 
logged: boolean; 
ngOnInit() { 
    this.logged = true; 
    // variable: 
    this.loginService.setLogged(logged); 
    // Localstorage: 
    localStorage.setItem('logged', logged); 
}

在你的孩子的組成部分：

logged: boolean; 
constructor(loginService:LoginService) { 
    // variable: 
    this.logged = this.loginService.isLogged(); 
    // Localstorage: 
    this.logged = this.loginService.isLogged; 
}

來源

2018-01-24 10:07:43 Wanjia

路由器 - 插座組件中的輸入變量

回答

相關問題