Angular - 使用@Output和Promises回拨给父组件

我希望能够订阅子组件的onSearch @Output，以便在子组件中执行搜索时返回数据来自搜索的是在父组件中处理的。有没有办法在Angular中做到这一点？我试图搜索一个@Input，并且它用于返回一个promise，但“this”作用域是子组件。因此，我认为它是一个@oOutputAngular - 使用@Output和Promises回拨给父组件

@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=>{}) 
     }) 
}

来源

2017-08-07 Croeber

我不明白你为什么使用'let this = self'。你在打字稿中，所以这是为你处理;）。另外，你的问题可能来自'this.service（...）'，因为'this.service'不是函数，它是一个类，所以你需要从它调用函数。 – Supamiu

子组件

@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"}); 
    } 
}

父组件

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

我使用的数据来自于父为子组件的输入，并且当子组件搜索某些东西时，您将使用搜索到的文本发出事件，然后在父组件中处理它，并更新作为输入传递给子项的数据属性。

换句话说

，

父 =>输入（数据）=>儿童
儿童 =>发射（搜索）=>父
//哪个更新输入（数据）并反映在这个孩子身上。

来源

2017-08-07 12:16:00

你不需要在这种情况下使用承诺:)。 –

Angular - 使用@Output和Promises回拨给父组件

回答

相关问题