Javascript Angular 2服务单例作用域问题

我有一个角度2服务，我似乎无法得到正确的工作。出于某种原因，这方面的范围不是我所期望的。我使用的是粗箭头，它应该可以正确地观察事物的范围，但我不确定轮子在哪里脱落

服务

declare const Trello: any;

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class TrelloService {
    key: string = 'test';
    token: string = 'test';
    boards: any = [];

    constructor(private http: Http) {
        console.log('Initializing TrelloService.  You should only see me once.');
    }

    getOpenBoards(): Promise<void> {
        // 'this' is null here.  No scope at all???
        const url = `https://api.trello.com/1/member/me/boards?key=${this.key}&token=${this.token}`;
        return this.http.get(url)
            .toPromise()
            .then((response: Response) => {
                debugger;
                this.boards = response.json();
            });
    }
}

尝试将then.then（）调用拆分为函数

export class FetchDataComponent
{
    showError: boolean = false;

    constructor(private trelloService: TrelloService,
                private catchflyService: CatchflyService,
                private router: Router)
    {

        this.catchflyService.getProjects()
            .then(()=>
            {
                this.trelloService.getOpenBoards()
            })
            .then(()=>
            {
                this.trelloService.getAllLists()
            })
            .then(() =>
            {
                console.log('finished getting projects, boards, and lists');
            })
            .catch((err) =>
            {
                console.log(err);
                console.log('service rejected');
            });
    }
}

---

当您调用

时，请执行如下操作：

this.catchflyService.getProjects()
  .then(this.trelloService.getOpenBoards)
  .then(this.trelloService.getAllLists)
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

您正在将
getOpenBoards
函数作为引用传递，这会使它失去与所在对象的绑定。您可以执行以下两种操作之一：

1：直接在处理程序中调用函数：

this.catchflyService.getProjects()
  .then(i => this.trelloService.getOpenBoards())
  .then(i => this.trelloService.getAllLists())
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

this.catchflyService.getProjects()
  .then(this.trelloService.getOpenBoards.bind(this.trelloService))
  .then(this.trelloService.getAllLists.bind(this.trelloService))
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

2：传入时绑定函数：

this.catchflyService.getProjects()
  .then(i => this.trelloService.getOpenBoards())
  .then(i => this.trelloService.getAllLists())
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

this.catchflyService.getProjects()
  .then(this.trelloService.getOpenBoards.bind(this.trelloService))
  .then(this.trelloService.getAllLists.bind(this.trelloService))
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

编辑

最后一个音符。我假设您在这里所做的是调用三个没有依赖项的异步方法（因为传递给
然后
的函数没有参数）。由于链接
函数的方式，它们会按顺序调用。如果这三个调用之间没有依赖关系，您可以通过并行调用它们来进一步优化代码：

var p1 = this.catchflyService.getProjects();
var p2 = this.trelloService.getOpenBoards();
var p3 = this.trelloService.getAllLists();

Promise.all([p1,p2,p3])
  .then(() => {
    console.log('finished getting projects, boards, and lists');
  })
  .catch((err) => {
    console.log(err);
    console.log('service rejected');
});

从TS的角度来看，1更好，因为
bind
仍然是类型不安全的。我同意，我自己总是使用方法1，但我觉得应该提到方法1，如果只是为了进一步说明问题中的代码不起作用的话。我添加了最后一条注释，可能与您相关。不确定你是否收到编辑通知，希望这条评论能起到作用。谢谢你的留言。是的，它们是按设计连载的。我希望其他遇到这个问题的人会发现你的彻底回答和我的一样有用！