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