Angular2 - 服务未在构造函数和ngOnInit之外定义？

我必须在这里做错事，但我不知道什么......我是一个Angular2新手在我的第一个ng2应用程序中蹒跚而行。我试图从一个组件内访问服务的方法，但该服务只在构造函数（）和ngOnInit（）中定义，它返回为我的其他组件函数中未定义的。Angular2 - 服务未在构造函数和ngOnInit之外定义？

这与this issue类似，但我使用的是private关键字，仍然存在问题。

这里是我的服务：

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

来源

2017-01-18 Josh

这是你传递给函数的方式

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不指向当前的类，但在某处可观察到的（从那里它被称为）

来源

2017-01-18 20:40:39

谢谢！我其实刚刚尝试了箭头功能，它的工作，但我不知道为什么。在您对可观察的事件发表评论后，我明白了。与2天的事情斗争总是很有趣，然后在公开发布问题几分钟后意识到这是一个愚蠢的错误...... :-) – Josh

发布一个问题有助于很多人对这个问题有不同的想法工作时间：D。这有助于寻找解决方案。 –

Angular2 - 服务未在构造函数和ngOnInit之外定义？

回答

相关问题