Angular 2：如何观察服务变量？

Question

见下面的代码，

    @Component({
         template: `<div *ngIf="loggedIn">show this when logged in</div>
                    <div> other content </div>
                    <router-outlet></router-outlet>`,
         providers: [UserService]
    })
    class App{
         private loggedIn:boolean;
    }
    @Injectable()
    class UserService{
         loggedIn:boolean = false;
         getIsLoggedIn(){return this.loggedIn;}
         setLoggedIn(){this.loggedIn = true;}
    }
    @Component({
         template: '<div (click)="login()"></div>'
    })
    class LoginComponent{
         login(){userService.setLoggedIn();}
    }
    bootstrap(App);

考虑默认路由器配置需要登录组件。我也省略了一些依赖注入代码（所以这不是一个错误）。现在我希望App组件中的div只有在UserService的loggedIn变量变为true时才可见。

我看过指令变量观察，但不知道如何跨组件和服务来做到这一点。