Angular 2 Dart：如何在父路由器和子組件之間共享變量？

Question

如果在路由器中使用子組件，並通過綁定更新它們，我該如何共享變量？

這是（部分）我的代碼：

app_component.dart：

import 'package:angular2/core.dart'; 
import 'package:angular2_components/angular2_components.dart'; 
import 'package:angular2/router.dart'; 

import 'package:my_app/profile_component/profile_component.dart'; 
import 'package:my_app/login_component/login_component.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    templateUrl: 'app_component.html', 
    directives: const [ 
    ROUTER_DIRECTIVES, 
    materialDirectives, 
    LoginComponent, 
    ProfileComponent 
    ], 
    providers: const [ 
    ROUTER_PROVIDERS, 
    const Provider(LocationStrategy, useClass: HashLocationStrategy), 
    materialProviders 
    ], 
) 
@RouteConfig(const [ 
    const Route(path: 'home', name: 'Home', component: HomeComponent, useAsDefault: true), 
    const Route(path: 'profile', name: "User Profile", component: ProfileComponent) 
]) 
class AppComponent { 

    @ViewChild('login') 
    LoginComponent loginComponent; 
    @ViewChild('profile') 
    ProfileComponent profileComponent; 

    bool get isUserLoggedIn => loginComponent.isUserLoggedIn; 

} 

app_component.html：

<nav> 
    <ul> 
    <li *ngIf="!isUserLoggedIn"> 
     <a (click)="loginComponent.loginOpen=true">Account/Login</a> 
    </li> 
    <li *ngIf="isUserLoggedIn"> 
     <a id="mb_logout" (click)="loginComponent.logUserOut()">Logout</a> 
    </li> 
    <li *ngIf="isUserLoggedIn"> 
     <a id="mb_profile" [routerLink]="['User Profile']">Zum Profil</a> 
    </li> 
    </ul> 
</nav> 

login_component.dart：

... 
bool get isUserLoggedIn => _isUserLoggedIn(); 
... 

profile_component.dart：

import 'package:angular2/core.dart'; 
import 'package:angular2_components/angular2_components.dart'; 

@Component(
    selector: 'profile', 
    styleUrls: const ['profile_component.css'], 
    templateUrl: 'profile_component.html', 
    directives: const [materialDirectives], 
    providers: const [materialProviders], 
) 
class ProfileComponent { 

    @Input() 
    bool isUserLoggedIn; 

    ProfileComponent() { 
    print(isUserLoggedIn); 
    } 
} 

總之我想從內ProfileComponent訪問isUserLoggedIn的當前值。我怎樣才能做到這一點？

Answer 1

在父組件提供共享服務

@Injectable() 
class SharedService { 
    bool _isUserLoggedIn = false; 
    bool get isUserLoggedIn => _isUserLoggedIn; 
    set isUserLoggedIn(bool value) { 
    _isUserLoggedIn = value ?? false; 
    _isUserLoggedInController.add(_isUserLoggedIn); 
    } 

    StreamController<bool> _isUserLoggedInController; 
    bool get onIsUserLoggedIn => _isUserLoggedInController.stream; 


    SharedService() { 
    _isUserLoggedInController = new StreamController<bool>.broadcast(
     onListen:() => _isUserLoggedInController.add(_isUserLoggedIn) 
    ); 
    } 
} 

在組件要更新使用或更新狀態注入服務

@Component(
    ..., 
    template: ''' 
    <div>isLoggedIn: {{sharedService.onIsUserLoggedIn | async}}</div> 
    <button (click)="toggleIsUserLoggedIn()">{{(sharedService.onIsUserLoggedIn | async) ? 'log out' : 'log in'}}</div> 
    ''', 
) 
class SomeComponent { 
    final SharedService sharedService; 
    SomeComponent(this.sharedService); 

    toggleIsUserLoggedIn() { 
    sharedService.isUserLoggedIn = !sharedService.isUserLoggedIn; 
    } 
} 

提供服務AppComponent

@Component(
    selector: 'my-app', 
    providers: const [SharedService], 
) 
class AppComponent {} 

Answer 2

這就是我如何實現這一點。使用共享服務。

在部件，其中該模型被更新/使用：

class myClassSend { 

constructor(private sharedService: SharedService){ 
    this.sharedService.userStatusUpdate(this.isUserLoggedIn); // We send isUserLoggedIn value to the shared service 

    } 
} 

我們的共享服務可以是這樣的：

export class SharedService { 
    userStatusUpdate$: Observable<any>; 
    private userStatusUpdateSubject = new Subject<any>(); 

    constructor() { 
     this.userStatusUpdate$ = this.userStatusUpdateSubject.asObservable(); 
    } 

    userStatusUpdate(userStatus) { 
     this.userStatusUpdateSubject.next(userStatus); 
    } 
} 

在組件，我們想知道型號的價值：

class myClassReceive { 
    bool isUserLoggedIn; 

constructor(private sharedService: SharedService){ 
    this.sharedService.userStatusUpdate$.subscribe((userStatus) => { 
      this.isUserLoggedIn = userStatus; // And here we receive the isUserLoggedIn value! 
      } 
     ); 
} 

現在，認爲從myClassSend只要你想，你可以發送信息：OnInit的，的onChange等等......而myClassReceive將「聽」所有的時間，並會收到你發送的值參數傳遞給共享服務。

將共享服務看作是與2人（組件）通信，發送消息（參數/數據）的手機。

這裏是角的文檔：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service