Angular 角度-使用@Output和Promises回调父组件

我希望能够订阅子组件的onSearch@Output，以便在子组件中执行搜索时，父组件中处理从搜索返回数据的承诺。有没有办法做到这一点？我已经尝试将onSearch设置为@Input，这可以用于返回承诺，但“this”范围是子组件。所以我认为它必须是一个输出

@Component({
  selector: 'child-component-search',
  templateUrl: './child-component.html'
})
export class ChildSearchComponent{
  public data : any = new Array();
  @Output() onSearch: any = new EventEmitter();
  search(form: any) {
      let self = this
      this.onSearch.emit({searchText:"Text"}).then(res=>{
        self.data = res;
      },rej=>{})
  }
}

@Component({
  selector: 'parent-component-search',
  template: `
    <child-component-search (onSearch)="search($event)"></child-component-search>
  `
})
export class ParentComponent{
  constructor(public service: MyService){}
  search(search: any) {
      let self = this
      return new Promise((resolve,reject)=>{
        this.service(search.searchText).then(res=>{
            resolve(res)
        },rej=>{})
      })
}

@组件({
选择器：“子组件搜索”，
templateUrl:“./child component.html”
})
导出类ChildSearchComponent{
公共数据：any=新数组（）；
@Output（）onSearch:any=neweventemitter（）；
搜寻（表格：任何）{
让self=这个
emit（{searchText:“Text”}）。然后（res=>{
self.data=res；
}，rej=>{}）
}
}
@组成部分({
选择器：“父组件搜索”，
模板：`
`
})
导出类ParentComponent{
构造函数（公共服务：MyService）{}
搜索（搜索：任何）{
让self=这个
返回新承诺（（解决、拒绝）=>{
this.service（search.searchText）.then（res=>{
解决（res）
}，rej=>{}）
})
}

子组件

@Component({
  selector: 'child-component-search',
  templateUrl: './child-component.html'
})
export class ChildSearchComponent{
  @Input() data; // use this data in the template
  @Output() onSearch = new EventEmitter<{searchText:string}>();

  search(form: any) {
      this.onSearch.emit({searchText:"Text"});
  }
}

@组件({
选择器：“子组件搜索”，
templateUrl:“./child component.html”
})
导出类ChildSearchComponent{
@Input（）data；//在模板中使用此数据
@Output（）onSearch=neweventemitter（）；
搜寻（表格：任何）{
this.onSearch.emit（{searchText:“Text”}）；
}
}

父组件

@Component({
  selector: 'parent-component-search',
  template: `
    <child-component-search (onSearch)="search($event)" [data]='data'>
    </child-component-search>
  `
})
export class ParentComponent {
  data:any[] = [];

  constructor(public service: MyService){}

  search(search: any) {
      return new Promise((resolve,reject)=>{
        this.service(search.searchText).then( res =>{
            this.data = res; // assuming the service will return array
        });
      })
}

@组件({
选择器：“父组件搜索”，
模板：`
`
})
导出类ParentComponent{
数据：任意[]=[]；
构造函数（公共服务：MyService）{}
搜索（搜索：任何）{
返回新承诺（（解决、拒绝）=>{
this.service（search.searchText）.then（res=>{
this.data=res；//假设服务将返回数组
});
})
}

我使用来自父组件的数据作为子组件中的输入，当子组件搜索某个内容时，您会发出一个带有搜索文本的事件，然后您在父组件中处理它，并更新作为输入传递给子组件的数据属性

换句话说,

父项=>输入（数据）=>子项
子项=>发射（搜索）=>父项
//更新输入（数据）并在

---

孩子。

我通过传递回调函数实现了这一点：

@Component({
  selector: 'child-component-search',
  templateUrl: './child-component.html'
})
export class ChildSearchComponent{
  public data : any = new Array();

  @Input() onSearch: Function;
  search(form: any) {

      this.onSearch({searchText:"Text"}, res => {
        this.data = res;
      });
  }
}

@Component({
  selector: 'parent-component-search',
  template: `
    <child-component-search [onSearch]="onSearch"></child-component-search>
  `
})
export class ParentComponent{
  constructor(public service: MyService){}

  onSearch = (search: any, callback) => {

      this.service(search.searchText).then(res=>{
          callback(res)
      },rej=>{});
  }
}

@组件({
选择器：“子组件搜索”，
templateUrl:“./child component.html”
})
导出类ChildSearchComponent{
公共数据：any=新数组（）；
@Input（）onSearch:函数；
搜寻（表格：任何）{
this.onSearch（{searchText:“Text”}，res=>{
这个数据=res；
});
}
}
@组成部分({
选择器：“父组件搜索”，
模板：`
`
})
导出类ParentComponent{
构造函数（公共服务：MyService）{}
onSearch=（搜索：任意，回调）=>{
this.service（search.searchText）.then（res=>{
回调（res）
}，rej=>{}）；
}
}

我不明白您为什么要使用

让this=self

。您使用的是typescript，所以这是为您处理的；）。此外，您的问题可能仅仅来自

这个服务（…）

，因为

这个.service

不是一个函数，它是一个类，所以您需要从中调用函数。在这种情况下，您不需要使用承诺：）。