角2ダーツ：ルータと子コンポーネントとの間で変数を共有する方法は？

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：私はProfileComponent内からisUserLoggedInの現在の値にアクセスしたい要するに

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

。どうすればこれを達成できますか？

Answer 1

は、あなたが使用することを更新したり、ステータスがサービス

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

を注入アップデートするコンポーネントで

@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) 
    ); 
    } 
} 

共有サービスを提供します

サービスを提供する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