Блог

Я новичок в Angular и пытался найти то, что мне нужно, но не смог. Пожалуйста, помогите.

Допустим, это рабочая функция с требуемыми параметрами:

 export class ChildComponent implements OnInit {

  ...

  datatable(params, callback) {
    this.service.getList(params).subscribe(response => {
      callback({
        recordsTotal: response.recordsTotal,
        recordsFiltered: response.recordsFiltered,
        data: response.data
      });
    });
  }

  ...

}
  

Все вышеперечисленное работает нормально. Но тогда я хочу сделать этот дочерний компонент общим компонентом, поэтому мне нужно отделить эту функцию и поместить ее в ParentComponent . Пожалуйста, обратите внимание, что приведенные ниже коды неверны, но я пытаюсь объяснить свою точку зрения следующим образом:

Дочерний компонент:

 export class ChildComponent implements OnInit {

  @Output() source: EventEmitter<any> = new EventEmitter<any>();

  datatable(params, callback) {
    this.source.emit(params, callback).subscribe(response => {
      callback({
        recordsTotal: response.recordsTotal,
        recordsFiltered: response.recordsFiltered,
        data: response.data
      });
    });
  }
  
  ...

}
  

ParentComponent:

 @Component({
  selector: 'parent-component',
  template: '
   <child-component (source)="getList($event)"></child-component>
  '
})
export class ParentComponent implements OnInit {
  
  constructor(private service: Service) { }
  
  getList(params) {
    return this.service.getList(params);
  }

}
  

Обслуживание:

 export class Service {

  constructor(private http: HttpClient) { }

  getList(data) {
    return this.http.post("http://example.com/list", data)
  }
}
  

Я знаю, что поступаю неправильно. Мне нужно, чтобы дочерний компонент передавал параметр через функцию ParentComponent, а затем прослушивал возврат оттуда. Как мне сделать это правильно? Спасибо.

Я думаю, что вы не используете EventEmitter, вы определили его, но не используете

может быть

 datatable(params, callback) {
  this.service.getList(params).subscribe(response => {
    callback({
      recordsTotal: response.recordsTotal,
      recordsFiltered: response.recordsFiltered,
      data: response.data
    });

    this.source.emit('what ever you want to pass');
  });
}
  

ParentComponent.ts

 @Component({
  selector: 'parent-component',
  template: '
   <child-component (source)="getList($event)"></child-component>
  '
})
export class ParentComponent implements OnInit {
  
  constructor(private service: Service) { }
  
  getList(params) {
    return this.service.getList(params).subscribe();
  }

}