각도 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는 : 한마디로

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

상위 구성 요소에

당신이 사용을 업데이트하거나 상태가 서비스

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

모델의 가치 :

등의 onInit onchange를을 ... 그리고 myClassReceive이 "듣고" 모든 시간이 될 것입니다 그리고 당신이로 보내는 값을받을 것이다 :

지금, myClassSend에서 당신이 원하는 때마다 정보를 보낼 수 있다고 생각합니다 매개 변수를 공유 서비스에 추가하십시오.

공유 서비스는 2 명 (구성 요소)을 통신하고 메시지 (매개 변수/데이터)를 보내는 휴대 전화로 생각하십시오. 여기

는 각도의 문서입니다 : 공유 서비스를 제공 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service