Transferring functionality from a child component to a parent component

Question

Transferring functionality from a child component to a parent component

I have a Base Component called ListComponent and a ParentComponent named Businesses2ListComponent. The concept is to have multiple types of Lists with tables that all stem from the ListComponent. This requires passing the correct service accordingly.

In this scenario, I need to pass the BusinessService (which is an extension of BaseService) to the BaseComponent.

Here's the structure of the ListComponent:

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent<S extends BaseService<T, L>, T, L> implements OnInit {

  constructor(private viewContainerRef: ViewContainerRef,
              private domElement: ElementRef,
              private ngForage: NgForage,
              private route: ActivatedRoute,
              private router: Router,
              private injector: Injector,
              private dataService: S) {
  }
  
}

This is the definition of my Business2ListComponent:

@Component({
  selector: 'app-businesses2-list',
  templateUrl: './businesses2-list.component.html',
  styleUrls: ['./businesses2-list.component.scss']
})
export class Businesses2ListComponent extends ListComponent<BusinessService, Business, BusinessList> implements OnInit {

  constructor(viewContainerRef: ViewContainerRef,
              domElement: ElementRef,
              ngForage: NgForage,
              dataService: BusinessService,
              route: ActivatedRoute,
              router: Router,
              injector: Injector) {
    super(viewContainerRef, domElement, ngForage, route, router, injector, dataService);
  }

  ngOnInit() {
  }

}

Upon trying to execute this setup, I encountered errors: https://i.sstatic.net/n9dVO.png https://i.sstatic.net/dJ9e7.png

I suspect the issue lies in the final argument, but what other approach should I consider?

angular typescript frontend web-frontend

Answer 1

Answer №1

Seeing a question mark in Angular usually indicates that the object being injected cannot be found. There are several potential causes for this issue, but one common starting point is to check your module file. Make sure you have properly included and instantiated BusinessService in the providers array of your module.

Answer 2

Seeing a question mark in Angular usually indicates that the object being injected cannot be found. There are several potential causes for this issue, but one common starting point is to check your module file. Make sure you have properly included and instantiated BusinessService in the providers array of your module.

Answer 3

Answer №2

You are unable to perform that action within your constructor when: private dataService: S.

You have two choices: You can adjust your constructor to accept it in this way:

private dataService: new () => S

There may be a TSLint error in your BusinessListComponent constructor when you invoke super(), but it will function as intended.

Alternatively, my preferred approach in your scenario involves using OOP, as I do not see a need to pass in BusinessService in your

ListComponent<BusinessService, Business, BusinessList>

. Here is a stackblitz demonstration of this technique.

In your BusinessListComponent

export class BusinessListComponent extends ListComponent<Business, BusinessList> implements OnInit {

  constructor(//...your args, private businessService: BusinessService) { 
    super(// ... your args, businessService);
  }

  ngOnInit() {
  }
}

Your ListComponent would look like this:

export class ListComponent<T, L> implements OnInit {
  constructor(private dataService: BaseService<T, L>) { 
  }
  ngOnInit() {
  }
}

And for your BusinessService

export class BusinessService extends BaseService<Business, BusinessList> {
  constructor() {
    super();
  }
}

I hope that clears things up for you.

Answer 4

You are unable to perform that action within your constructor when: private dataService: S.

You have two choices: You can adjust your constructor to accept it in this way:

private dataService: new () => S

There may be a TSLint error in your BusinessListComponent constructor when you invoke super(), but it will function as intended.

Alternatively, my preferred approach in your scenario involves using OOP, as I do not see a need to pass in BusinessService in your

ListComponent<BusinessService, Business, BusinessList>

. Here is a stackblitz demonstration of this technique.

In your BusinessListComponent

export class BusinessListComponent extends ListComponent<Business, BusinessList> implements OnInit {

  constructor(//...your args, private businessService: BusinessService) { 
    super(// ... your args, businessService);
  }

  ngOnInit() {
  }
}

Your ListComponent would look like this:

export class ListComponent<T, L> implements OnInit {
  constructor(private dataService: BaseService<T, L>) { 
  }
  ngOnInit() {
  }
}

And for your BusinessService

export class BusinessService extends BaseService<Business, BusinessList> {
  constructor() {
    super();
  }
}

I hope that clears things up for you.

Transferring functionality from a child component to a parent component

Answer №1

Answer №2

Similar questions

The JWT Token is not being sent to the allowedDomain or whitelistedDomains in auth0/angular-jwt due to a configuration issue involving Regexp

How can I create an Array of objects that implement an interface? Here's an example: myData: Array<myInterface> = []; However, I encountered an issue where the error message "Property 'xxxxxx' does not exist on type 'myInterface[]'" appears

Leveraging the power of Angular 5 to seamlessly integrate two distinct components on

Can you please explain the significance of classes <T> and <U> in Angular 2?

Adjustable Material UI Switch that reflects the value, yet remains changeable

Formula for a distinct conclusion of written words

Using Flickity API in Vue 3 with Typescript Integration

How can I effectively retrieve a value from Ionic storage and use it as an authorization token instead of receiving the promise "Bearer [object Promise]"?

Adding bootsprap css-4 to an Angular Java project using Maven

Aligning Material UI Input with Select Component

Left-to-right animation of Angular Material progress bar buffer

Multiple asynchronous calls in Angular 2

The function that iterates through the 'categoria' state and returns a new array is not functioning properly

Angular 6: Dealing with Type Errors in the HttpClient Request

Leveraging async-await for carrying out a task following the deletion of a collection from a mongodb database

Is it possible to assign a property value to an object based on the type of another property?

What steps can I take to change my single-line navbar into a two-line design?

Listening to changes in a URL using JQuery

What is the functionality of angular's @Attribute decorator?

Sticky header in React data grid