当前位置:  开发笔记 > 编程语言 > 正文

Angular2 - 服务没有在构造函数和ngOnInit之外定义?

如何解决《Angular2-服务没有在构造函数和ngOnInit之外定义?》经验,为你挑选了1个好方法。

我必须在这里做错事,但我不知道是什么......我是一个Angular2新手在我的第一个ng2应用程序中磕磕绊绊.

我正在尝试从组件内访问服务上的方法,但该服务仅在构造函数()和ngOnInit()中定义,它在我的其他组件函数中返回为未定义.

这与此问题类似,但我使用的是private关键字,但仍然存在问题.

这是我的服务:

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

@Injectable()

export class UserService {
    userList$: FirebaseListObservable;
    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();
        }
    }
}

Günter Zöchb.. 5

这是你传递函数的方式

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> Günter Zöchb..:

这是你传递函数的方式

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不会指向您当前的类,而是指向可观察的某个地方(从其所谓的位置)

推荐阅读
李桂平2402851397
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有