Question

我有一个Angular 2服务，似乎无法正常工作。出于某种原因，这个的范围并不是我所期望的。我正在使用胖箭，这应该保持正确的范围，但我不确定车轮在哪里脱落。

服务

<div id="wrapper">
  <div id="menu">
    <ul>
      <li class="has-sub"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" />
        <ul>
          <li><a href="#" target="_blank">Subfield 1</a></li>
          <li><a href="#" target="_blank">SubField</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="info">
    <div id="info-content">
      <h1>All Channels <strong>DISPLAY PPC SOCIAL</strong></h1>
    </div>
  </div>
</div>

以下组件在服务上调用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(); }); } }。如果是，getOpenBoards为空。这尖叫“疯狂的javascript范围问题”，但我不知道如何处理它。我到处都需要this吗？如果是这样，我怎么能从组件中做到这一点？

组件

bind

Answer 1

当您像以下一样调用then函数时：

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

2：传递函数时将其绑定：

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

修改

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

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

Answer 2

尝试将.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');
            });
    }
}

Angular 2 Service Singleton范围问题

2 个答案: