Question

我正在学习Angular 2而不是新手，今天我尝试在角度2中使用EventEmitter，允许组件传递数据。我想做的是，在click事件上，调用一个返回promise的服务方法。然后我想将结果发送回父组件。我有一个组件，在按钮上有一个click事件，它调用一个注入的服务，该服务以Promise的形式返回数据，但在＆＃34;然后＆＃34;我正在尝试发回数据，但我的EventEmitter未定义。

如果我在那之外调用emit，它运行正常，我是否错过了某种与父作用域的绑定？或承诺在这里使用是错误的，它应该是订阅？任何帮助将不胜感激。

这是组件代码

import { Component, Output, Input, Injectable, EventEmitter } from '@angular/core';
import { Search } from '../Shared/models/search';
import { SearchResult } from '../Shared/models/searchResult';
import { SearchService } from '../Service/search.service';

@Component({
    selector: 'search',
    template: `<div class="col-sm-12">
                    <div class="input-group">
                        <input [(ngModel)]="search.searchText" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-default" (click)="searchFor()" >Go!</button>
                        </span>
                    </div>
                </div>`
})


@Injectable()
export class SearchComponent {
    constructor(private searchService: SearchService) { }

    @Input() search: Search
    @Output() errorMessage: string;
    @Output() onSearchChange = new EventEmitter<SearchResult[]>();

    searchFor() {
        this.searchService.search(this.search).then(function (results) {
            console.log("Value");
            console.log(results);
            this.onSearchChange.emit(results);
        });
    }
}
}

Answer 1

为了能够保持this的范围，你需要使用胖箭头语法，所以改变

this.searchService.search(this.search).then(function (results) {

为：

this.searchService.search(this.search).then(results => {

来自这里的优秀答案的更多信息：How does the "this" keyword work?

Angular 2无法获得错误的混乱

1 个答案: