pass as a generic service to an abstract class in angular 2

I am starting at angular and I have encountered a problem when creating a base component. I would like the AbstracTableComponent class to take care of the basic CRUD operations, and be able to reuse it with other models, but for this I need to pass as a parameter in the constructor the service that has to consume, in this case userService, but if I wanted to reuse it for groups for example , you would have to pass groupService and so on, any help will be appreciated ..: (

First create a base service using the following class.

export abstract class RestService<T> {
  protected baseUrl: string = 'http://127.0.0.1:8000';
  relative_url: string;

  get complete_url() {
    return '${this.baseUrl}${this.relative_url}';
  }

  constructor(protected http: HttpClient) {
  }


  getAll(page: Page): Observable<PagedData<T>> {
    const startIndex = (page.page_number - 1) * page.size;
    return this.http.get(this.complete_url, {
      params: new HttpParams()
        .set('limit', String(page.size))
        .set('offset', String(startIndex))
        .set('ordering', page.ordering())
        .set('search', page.filter)
    }).pipe(map((data: PagedData<T>) => this.getPagedData(page, data)));
  }

  getOne(id: number): Observable<T> {
    return this.http.get('${this.complete_url}${id}/').pipe(map((resp: T) =>         
resp));
  }

Then I created a service for the user class

@Injectable()
export class UsersService extends RestService<User> {

  constructor(http: HttpClient) {
    super(http);
    this.relative_url = '/api/usuarios/';
  }

  postUser(dataJson: any): Observable<User> {
    return this.http.post('${this.complete_url}', dataJson).pipe(map((res:     User) => res));
  }

  putUser(id, data) {
    return this.http.put('${this.complete_url}${id}/', data).pipe(map((res:     User) => res));
  }

  deleteUser(id) {
    return this.http.delete('${this.complete_url}${id}/').pipe(map(res =>     res));
  }

  getUserDetail(user_id: number) {
    return this.getOne(user_id);
  }

  getUsersList(page: Page): Observable<PagedData<User>> {
    return this.getAll(page);
  }

I have also created a base component that contains methods that are repeated most times

export abstract class AbstracTableComponent {
  config: ModuleConfig = new ModuleConfig();
  loading: boolean = true;
  page: Page = new Page();
  components = {
    remove: DeleteConfirmComponent,
    create: UserFormComponent,
  };
  callbacks = {
    create: Function,
    edit: Function,
    delete: Function,
    search: Function,
  };

  constructor(protected dialogService: DialogService, protected     pagerService: PagerService) {
  }

  onPageEvent(event) {
    const page = this.pagerService.preparePage({page_number: event.page},     this.page);
    this.getData(page);
  }

  getData(params) {
  }

  getSearch() {
    this.dialogService.addDialog(GenericFilterComponent, {
      title: 'busqueda avanzada',
      forms: this.config.forms,
    }, {closeByClickingOutside: true}).subscribe((confirm) => {
      if (confirm) {
        console.log('Resultado: ', confirm);
      }
    });
  } 

The getData () method gets the list of users of the userService service, in the parent class the AbstracTableComponent is only defined, but I am not sure if it should be implemented in the child component or here. Next I have the child component

export class UsersTableComponent extends AbstracTableComponent implements     OnInit {
  current_account: Cuenta;
  rows: User[] = [];

  constructor(private userService: UsersService, private profileService:     ProfileService, pagerService: PagerService,
              dialogService: DialogService) {
    super(dialogService, pagerService);
    this.page.size = 10;
    this.page.order = {field: 'username', dir: 'asc'};
    this.callbacks.create = this.create.bind(this);
    this.callbacks.edit = this.edit.bind(this);
    this.callbacks.delete = this.delete.bind(this);
    this.callbacks.search = this.getSearch.bind(this);
  }

  ngOnInit() {
    this.profileService.current_account.subscribe(result => {
      this.current_account = result;
    });
    this.loadConfiguration();
  }

  loadConfiguration() {
    this.userService.getModuleConfiguration().subscribe((result:     ModuleConfig) => {
      setTimeout(() => {
        this.config = result;
        this.loading = false;
        this.getData({page_number: 1});
      }, 150);
    }, error1 => {
      console.log('error: ', error1);
    });
  }

  getData(pageInfo) {
    const page = this.pagerService.preparePage(pageInfo, this.page);
    setTimeout(() => {
      this.userService.getUsersList(page).subscribe(response => {
        this.page = response.page;
        this.rows = response.data;
      });
    }, 100);
  }

  create() {
    this.dialogService.addDialog(UserFormComponent, {
      title: 'crear usuario',
    }, {closeByClickingOutside: true}).subscribe((result) => {
      if (result) {
        this.getData({page_number: 1});
      }
    });
  }

  edit(user_id: number) {
    this.dialogService.addDialog(UserEditComponent, {
      title: 'actualizar usuario',
      param: user_id,
    }, {closeByClickingOutside: true}).subscribe((result) => {
      if (result) {
        this.changeInfoCurrentUser(result);
        this.getData({page_number: 1});
      }
    });
  }