Angular2注入服务未定义答案

【问题标题】：Angular2 injected service going undefinedAngular2注入服务未定义
【发布时间】：2016-05-24 04:46:17
【问题描述】：

我正在关注this 教程，并通过在维基百科中搜索给定术语找到了以下代码。下面的代码工作正常，并从维基百科获取搜索结果。

export class WikiAppComponent {
      items: Array<string>;
      term = new Control();

      constructor(public wikiService: WikiService) { }

      ngOnInit() {
        this.term.valueChanges.debounceTime(400).subscribe(term => {
          this.wikiService.search(term).then(res => {
             this.items = res;
          })
        });
      }
 }

但是当我重构并将搜索代码移动到一个单独的函数时，它不起作用。搜索功能中的 this.wikiService 未定义。你能解释一下为什么它会变得未定义吗？

export class WikiAppComponent {
      items: Array<string>;
      term = new Control();

      constructor(public wikiService: WikiService) { }

      search(term) {
        this.wikiService.search(term).then(res => {
          this.items = res;
        });
      }

      ngOnInit() {
        this.term.valueChanges.debounceTime(400).subscribe(this.search);
      }
    }

【问题讨论】：

能否在浏览器中打开调试器，在搜索方法中设置断点，看看“this”的定义是什么？ TypeScript 尽最大努力模拟真实的类封装，但是当您使用函数指针时，javascript 的“this”问题仍然会浮出水面。

标签： dependency-injection angular angular2-services

【解决方案1】：

您遇到了范围问题，您的回调中的"this" 没有引用您的页面。像这样改变你的函数回调：

this.term.valueChanges.debounceTime(400).subscribe( 
   (term) => {
      this.search(term);
   });

【讨论】：