2017-01-18 5 views
1

Я ДОЛЖЕН делать что-то неправильно здесь, но я понятия не имею, что ... Я новичок Angular2, спотыкающийся в своем первом приложении ng2.Angular2 - сервис не определен вне конструктора и ngOnInit?

Я пытаюсь получить доступ к методам службы изнутри компонента, но служба определена только в конструкторах() и ngOnInit(), она возвращается как неопределенная в моих других компонентах.

Это похоже на this issue, но я использую личное ключевое слово и все еще имею проблему.

Вот моя служба:

import { Injectable } from "@angular/core"; 
import { AngularFire,FirebaseListObservable } from 'angularfire2'; 
import { User } from './user.model'; 

@Injectable() 

export class UserService { 
    userList$: FirebaseListObservable<any>; 
    apples: String = 'Oranges'; 

    constructor(private af: AngularFire) { 
     this.initialize(); 
    } 

    private initialize():void { 
     this.userList$ = this.af.database.list('/users'); 
    } 

    getTest(input:String):String { 
     return "Test " + input; 
    } 

    getUser(userId:String):any { 
     //console.log('get user',userId); 
     let path = '/users/'+userId; 
     return this.af.database.object(path); 
    } 
} 

И мой компонент:

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { UserService } from '../../shared/user.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'user-detail', 
    templateUrl: 'user-detail.component.html' 
}) 
export class UserDetailComponent implements OnInit { 

    routeParams$: any; 

    one: String; 
    two: String; 
    three: String; 

    constructor(private usrSvc:UserService,private route:ActivatedRoute) { 
     console.log('constructor',usrSvc); // defined here 
     this.one = usrSvc.getTest('this is one'); // works correctly 
    } 

    ngOnInit() { 
     console.log('ngOnInit',this.usrSvc); // also defined here 
     this.two = this.usrSvc.getTest('this is two'); // also works correctly 
     this.routeParams$ = this.route.params.subscribe(this.loadUser); 

    } 

    loadUser(params:any) { 
     console.log('loadUser',this.usrSvc); // undefined!! 
     this.three = this.usrSvc.getTest('this is three'); // BOOM 
    } 

    ngOnDestroy() { 
     if (this.routeParams$) { 
      console.log('unsub routeParams$'); 
      this.routeParams$.unsubscribe(); 
     } 
    } 
} 

ответ

4

Это от того, как вы передать функции

this.routeParams$ = this.route.params.subscribe(this.loadUser); 

должен быть

this.routeParams$ = this.route.params.subscribe(this.loadUser.bind(this)); 

или

this.routeParams$ = this.route.params.subscribe((u) => this.loadUser(u)); 

иначе this не указывает на ваш текущий класс, но где-то наблюдаемая (откуда она называется)

+1

Спасибо! Я на самом деле просто попробовал функцию стрелки второй раз, и это сработало, но я не был уверен, почему. После вашего комментария о наблюдаемом я его получаю. Всегда весело бороться с чем-то за 2 дня, а потом осознать, что это была глупая ошибка всего за несколько минут после публичного публичного обсуждения ... :-) – Josh

+0

Публикация вопроса помогает многому по-разному думать о проблеме, часы работы до: D. Это помогает найти решение. –