Question

我必须遗漏一些非常明显的东西，但是我在组件上使用订阅来监听服务中的更改时遇到了问题。

我有一个登录组件（此处未发布），它在LoginService中调用login方法，当用户登录时，navbar组件应该监听。

我错过了什么？

我的服务：

@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谢谢你的帮助

在Günter的回答后更新：

app.module.ts

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

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

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

LoginComponent.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()
        }
    }

LoginService.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
        })
}

navbar component.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)
        }))
    }

我在调试器中看到我只获得了一个loginservice实例，但是它仍然不起作用。

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()

订阅angular2不工作

1 个答案: