角度 - @OutputとPromisesを使用して親コンポーネントにコールバック

Question

子コンポーネントのonSearch @Outputにサブスクライブできるようにして、子コンポーネントで検索が実行されたときにデータを返すという約束親コンポーネントで処理されます。 Angularでこれを行う方法はありますか？私はonSearchを@Inputにしようとしましたが、それは約束を返すために働きますが、 "this"スコープは子コンポーネントです。だから私はそれが@oOutput

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

Answer 1

子コンポーネント

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

親コンポーネントiのデータが子コンポーネントで入力として親から来た使用

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

なければならないと思います子コンポーネントが何かを検索するときに、テキストが検索されたイベントを送出すると、それを親コンポーネントで処理し、その子に入力するデータプロパティを更新します。換言すれば

、

親 =>入力（データ）=>
子 =>発する（検索）=>親
//更新入力子（データ）、それを子供の に反映させます。