angular - 订阅 angular2 不工作

Question

我一定遗漏了一些非常明显的东西，但我在使用订阅组件来监听服务变化时遇到了问题。

我有一个登录组件(此处未发布)，它调用登录服务中的登录方法，导航栏组件应在用户登录时进行监听。

我错过了什么？

我的服务:

@Injectable()
export class LoginService {
    private request = new Request();
    private sessionData:BehaviorSubject<any> = new BehaviorSubject([])
    public session:Observable<any>

    constructor(private http: Http, _router: Router) {
        console.log("Login Service created.", http);
        this.session = this.sessionData.asObservable()
    }

    public getSessionData(): Observable<any>{
        return this.sessionData.asObservable();
    }

    login(userCredentials:UserCredentials):Observable<any> {    
        console.log("requesting login")
        this.request.ServiceType = "Connect"
        this.request.SessionId = "sessionlessrequest"
        this.request.Compression = "no"
        this.request.Parameters = userCredentials;
        let jsonrequest = JSON.stringify(this.request)
        return this.http.post("http://localhost/request.php", "data="+ jsonrequest,
            { headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded'
            })
        }).map( (responseData) => {
            this.sessionData = responseData.json();
            this.sessionData.next;
            this.sessionData.share;
            this.session = responseData.json();
            console.log(this.sessionData)
            return null
        })
    }

然后是我的组件:

@Component({
    selector: 'navbar',
    templateUrl: './app/navbar/navbar.component.html',
    providers: [SessionService, LoginService, UserCredentials]
})

export class NavBarComponent {
    sessionData: any
    constructor(sessionService: SessionService, private loginService: LoginService, private userCredentials: UserCredentials) {
    }

    ngOninit() {
        this.loginService.getSessionData().subscribe((value => {
            this.sessionData = value;
            console.log(this.sessionData)
        }))
    }

Gunter 谢谢你的帮助

君特回答后更新:

应用程序模块.ts

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        AboutComponent,
        NavBarComponent,
        LoginComponent,

    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        routing,

    ],
    providers: [appRoutingProviders, LoginService ],
    bootstrap: [AppComponent]
})

登录组件.ts:

@Component({
    selector: 'login',
    templateUrl: './app/login/login.component.html',
    providers: []
})

    export class LoginComponent {
        public usercredentials = new UserCredentials();
        constructor(private loginService:LoginService) {

        }
        login() {
            console.log(this.usercredentials)
            this.loginService.login(this.usercredentials).subscribe()
        }
    }

登录服务.ts:

@Injectable()
export class LoginService {
    private request = new Request();
    private sessionData:BehaviorSubject<any> = new BehaviorSubject([])
    public session:Observable<any>
    constructor(private http: Http, _router: Router) {
        console.log("Login Service created.", http);
        this.session = this.sessionData.asObservable()
    }

    public getSessionData(): Observable<any>{
        return this.sessionData.asObservable();
    }

    login(userCredentials:UserCredentials):Observable<any> {    
        console.log("requesting login")
        this.request.ServiceType = "Connect"
        this.request.SessionId = "sessionlessrequest"
        this.request.Compression = "no"
        this.request.Parameters = userCredentials;
        let jsonrequest = JSON.stringify(this.request)
        return this.http.post("http://localhost/request.php", "data="+ jsonrequest,
            { headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded'
            })
        }).map( (responseData) => {
            this.sessionData = responseData.json();
            this.sessionData.next;
            this.sessionData.share;
            this.session = responseData.json();
            console.log(this.sessionData)
            return null
        })
}

导航栏组件.ts :

@Component({
    selector: 'navbar',
    templateUrl: './app/navbar/navbar.component.html',
    providers: []
})

export class NavBarComponent {
    sessionData: any
    constructor(private loginService: LoginService) {

    }

    ngOninit() {
        this.loginService.getSessionData().subscribe((value => {
            this.sessionData = value;
            console.log(this.sessionData)
        }))
    }

我在调试器中看到我只获得了 1 个登录服务实例，但它仍然不起作用。

Answer 1

如果您想与应用程序中的其他组件或服务共享服务，请不要在您使用它的任何地方提供它。

在你想使用它的地方将它添加为构造函数参数。

要定义应在您的应用程序中共享单个实例的位置，请决定将其作为提供者放置在何处。 Angular2 DI 为每个提供者维护一个实例。

如果您在每个组件上添加 SessionService、LoginService 和 UserCredentials，每个组件将获得不同的实例。 当您将它添加到 @NgModule() 时，一个实例将与您的整个应用程序共享:

@NgModule({
  providers: [SessionService, LoginService, UserCredentials]
})
class AppModule {}

@Component({
    selector: 'navbar',
    templateUrl: './app/navbar/navbar.component.html',
    providers: []
})

更新

this.sessionData.next; 不执行任何操作。它应该是 this.sessionData.next(someValue)。

还有 this.sessionData.share; 应该是 this.session = this.sessionData.asObservable().share()