BehaviorSubject Observable 在 Angular 2 RC4 中不起作用

Question

我仍在使用 Angular 2 RC4，因为我在使用 RC5 时遇到了其他问题并让 HTTP 在那里工作。在这种情况下，我试图使用 BehaviorSubject observable 来更新我在 app.component.html 中使用的布尔变量 如果用户成功登录，则仅显示数据（使用 *ngIf）。我的应用程序在我部署在 Eclipse Neon 中的 Tomcat 8 服务器上运行良好。我以为我为此正确地遵循了其他示例，但我在 Chrome 中不断收到此错误 - TypeError: Cannot read property 'next' of undefined

你能帮我澄清一下我错过了什么吗？

auth.service.ts

import { Injectable }     from '@angular/core';
import { Headers, Http, Response, RequestOptions } from '@angular/http';
import { Observable, BehaviorSubject }     from 'rxjs/Rx';

@Injectable()
export class AuthService {

  public loggedIn:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  afterLogin() {
     this.loggedIn.next(true);
  }

}

app.component.ts

import { Component }          from '@angular/core';
import { ROUTER_DIRECTIVES, Router }  from '@angular/router';
import { AuthService }        from './auth/auth.service';
import { Observable, Observer, Subscriber }     from 'rxjs/Rx';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ AuthService ] 
})
export class AppComponent {

     public userLoggedOn: boolean;


     constructor (private _beginAuth: AuthService,
                  private router: Router) {}

     ngOnInit() { 

          this._beginAuth.loggedIn.subscribe(loggedIn => { this.userLoggedOn = loggedIn });

     }
}

main.ts

import {bootstrap}    from '@angular/platform-browser-dynamic';
import { Title } from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {AuthService} from './auth/auth.service';
import {APP_ROUTER_PROVIDERS} from './app.routes';
import {HTTP_PROVIDERS} from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
//import {enableProdMode} from '@angular/core';


//enableProdMode();
bootstrap(AppComponent, [
  AuthService,
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  Title,
  disableDeprecatedForms(),
  provideForms()
])
.catch((err: any) => console.error(err));

Chrome 控制台出错：

app-bundle.min.js:1 TypeError: Cannot read property 'next' of undefined
    at t.e.extractData [as project] (http://localhost/labtool/app/app-bundle.min.js:1:27030)
    at t._next (http://localhost/labtool/app/app-bundle.min.js:52:16718)
    at t.next (http://localhost/labtool/app/app-bundle.min.js:47:21545)
    at XMLHttpRequest.p (http://localhost/labtool/app/app-bundle.min.js:34:28779)
    at ZoneDelegate.invokeTask (http://localhost/labtool/resources/js/zone.js/dist/zone.js:365:38)
    at Object.onInvokeTask (http://localhost/labtool/app/app-bundle.min.js:32:21063)
    at ZoneDelegate.invokeTask (http://localhost/labtool/resources/js/zone.js/dist/zone.js:364:43)
    at Zone.runTask (http://localhost/labtool/resources/js/zone.js/dist/zone.js:265:48)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost/labtool/resources/js/zone.js/dist/zone.js:433:34)

也许错误是我使用的 HTML 语法。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li *ngIf="userLoggedOn" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin Tools<span class="caret"></span></a>
          <ul class="dropdown-menu">
                   <li><a [routerLink]="['home']">Home</a></li>
          </ul>
        </li>
      </ul>
  </div>

Answer 1

更新 - 测试代码

我根据您的代码创建了一个测试库，但没有看到错误。

package.json 依赖项

"dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
}

app.component.ts

import {Component, OnInit} from '@angular/core';

import {AuthService} from './auth.service';

@Component({
    selector: 'app-component',
    template: `<h1>{{title}}</h1>`,
    providers: [AuthService]
})
export class AppComponent implements OnInit {
    title = 'SO-39301683';

    public userLoggedOn: boolean;

    constructor(private _beginAuth: AuthService) { }

    ngOnInit() {

        this._beginAuth
            .loggedIn
            .subscribe(loggedIn => {
                this.userLoggedOn = loggedIn;
            });

        // Manually trigger afterLogin()
        this._beginAuth.afterLogin();

    }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';

@Injectable()
export class AuthService {

  public loggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  afterLogin() {
    this.loggedIn.next(true);

    console.log('afterLogin() triggered.');
  }

}

ma​​in.ts

// Polyfills
import 'es6-shim';
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'ts-helpers';

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
// import 'rxjs';

import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent } from './app/app.component';

// const ENV_PROVIDERS = [];
enableProdMode();

bootstrap(AppComponent, [HTTP_PROVIDERS])
    .catch(err => console.error(err));