服务中的rxjs订阅不会触发

Question

I am using the Angular 2 router to split up my app's login page, whilst using an AppComponent to hold the structuring of routes. I am also using a UserService to handle the rxjs subscription.

I'm not sure if I am misunderstanding the subscriptions purpose, but the main reason i'm using it is so AppComponent will know when a user is/not logged in.

It seems that only the initial false I set in new BehaviorSubject<Boolean>(false); actually gets returned. But when I actually run the login() function, nothing happens...

https://plnkr.co/edit/J2TtNawZro8AxLqk4JKf?p=preview

src/user.service.ts

@Injectable()
export class UserService {
  private _loggedInSource = new BehaviorSubject<Boolean>(false);
    // Observable navItem stream
    loggedIn$ = this._loggedInSource.asObservable();
    login() {
        this._loggedInSource.next(true);
    }
}

src/app.component.ts

@Component({
  selector: 'my-app',
  template: `
   <div>
     <h2>My app</h2>

     logged in?: {{status}}

     <router-outlet></router-outlet>
   </div>
  `,
  providers: [UserService]
})
export class AppComponent {
  subscription: Subscription;
  public status: Boolean = false;

  constructor(@Inject(UserService) private userService: UserService) {}

  ngOnInit() {
    this.subscription = this.userService.loggedIn$
      .subscribe(item => this.status = item)
  }
  ngOnDestroy() { this.subscription.unsubscribe(); }
}

src/login.component.ts

@Component({
    selector: 'login',
    template: `
      <form (submit)="login()" class="login" #loginForm="ngForm">
        <h2>Login</h2>
        <input type="email" placeholder="Email" [(ngModel)]="credentials.email" name="email"/>
        <input type="password" placeholder="Password" [(ngModel)]="credentials.password" name="password"/>
        <button type="submit">submit</button>
       </form>
  `,
  providers: [UserService]
})

export class LoginComponent {
    public credentials: Object = { email: "", password: "" };

    constructor(
      @Inject(UserService)      private userService: UserService
    ) { }

    login(): void {
      this.userService.login();
    }
}

Answer 1

remove providers: [UserService] from login and app component

working plunkr is here https://plnkr.co/edit/Y1tHx0nS2KQzS55PqW7L?p=preview

your code is creating multiple instances of UserService