Creating a Base Component in Typescript using Abstract

Question

I'm trying to create a base component with some default methods used in list page, so this is my ts file:

export abstract class BaselistComponent<T> implements OnInit {
  source: LocalDataSource = new LocalDataSource();

  constructor(private service: BasecrudService<T>,
              private notification: NotificationService) {
  }

   ngOnInit(): void {
    this.service.findRecords().subscribe((data: T[]) => {
      this.source.load(data);
    });
  }
}

And now i have the Component that use this base:

@Component({
  selector: 'ngx-unidade',
  templateUrl: './unidade.component.html',
  styleUrls: ['./unidade.component.scss'],
})
export class UnidadeComponent extends BaselistComponent<Unidade> {

   constructor(service: UnidadeService, notification: NotificationService) {
    super(service, notification);
  }
}

When i try to execute my APP i got Cannot read property 'findRecords' of undefined i know this error occur because this.service is undefined but i don't know why, i already declared it.

This is my service base:

export abstract class BasecrudService<T> {

  constructor(private http: HttpClient, private adapter: Adapter<T>) {
  }

  abstract getPrefixURL(): string;

  findRecords(): Observable<T[]> {
    return this.http.get(`${environment.apiUrl}/${this.getPrefixURL()}/pagina/0`).pipe(
      map((data: any) => data.registros.map(item => this.adapter.adapt(item))),
    );
  }
}

And the service Impl:

@Injectable({
  providedIn: 'root',
})
export class UnidadeService extends BasecrudService<Unidade> {

  constructor(http: HttpClient, adapter: Adapter<Unidade>) {
    super(http, adapter);
  }

  getPrefixURL(): string {
    return 'unidades';
  }

}

Edit 1

This is my console.log(this), note that my service is undefined

Edit 2 This is my project complete source: https://github.com/rlanhellas/safepark-front

Works fine here stackblitz.com/edit/angular-e4zvvp?file=src%2Fapp%2Funidade.ts — Jota.Toledo
– Jota.Toledo, Commented Jan 28, 2019 at 23:36
could you provide more info about your environment? eg. angular version and others — Jota.Toledo
– Jota.Toledo, Commented Jan 28, 2019 at 23:37
I edited the post with more information, i'm using angular 7 — Ronaldo Lanhellas
– Ronaldo Lanhellas, Commented Jan 28, 2019 at 23:41
@Jota.Toledo I have no ideia why you code works and mine not. — Ronaldo Lanhellas
– Ronaldo Lanhellas, Commented Jan 28, 2019 at 23:48
are you providing any of the services (abstract or concrete) in any module? — Jota.Toledo
– Jota.Toledo, Commented Jan 28, 2019 at 23:49

yurzui · Accepted Answer · 2019-01-29 14:24:43Z

1

The reason for your error is that you use interface in Angular DI.

unidate.service.ts

export class UnidadeService extends BasecrudService<Unidade> {

  constructor(http: HttpClient, adapter: Adapter<Unidade>) {
                                         ^^^^^^^
    super(http, adapter);
  }
}

which results in DI error so you don't get UnidadeService initialized

answered Jan 29, 2019 at 14:24

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a Base Component in Typescript using Abstract

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related