Angular2 -- @ViewChild from TypeScript base abstract class

Question

I was looking @ this SO Q & A, and wondering if it was possible to have a base abstract class instead? Rather than an interface, is it possible to have differing implementations of a base class in child components that are accessible to the parent component via the @ViewChild decorator in Angular2?

Ideally, I would like to have a means for child components that are instantiated via a parent Router to be capable of invoking the parent router -- does that make sense? I want the child to be able to call parentRouter.navigate(["SomeOtherRoute", { args: 'blah' }]);.

My initial approach was to have the child components implement a base class that the parent component would get a reference to via the @ViewChild decorator. The parent would subscribe to the action of the child attempting to invoke a navigation event, and its handler would invoke the router.navigate (since it has the router at the parent level).

score 25 · Answer 1 · answered Jul 02 '18 at 12:39

25

It is actually quite simple. For instance, if you have a class EmployeeComponent that extends PersonComponent which is an abstract class.

You can make it approachable by adding this in the EmployeeComponent:

providers: [ {provide: PersonComponent, useExisting: EmployeeComponent }]

And use ViewChildren() or ContentChildren() in your container component like this:

@ViewChildren(PersonComponent) public persons: QueryList<PersonComponent>;

answered Jul 02 '18 at 12:39

NiZa

3,806
1
21
29

This should be the correct answer, worked like a charm. – Ahmad Shahwan Jul 21 '21 at 13:55

score 5 · Accepted Answer · answered Apr 25 '16 at 13:46

5

You can't use @ViewChildren() or any of the similar decorators to query for subclasses of components.

Only names of template variables and concrete component and directive types (the types that are actually instantiated as component in your view) are supported.

answered Apr 25 '16 at 13:46

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks! I'm going to then implement the service approach defined here, https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service. – David Pine Apr 25 '16 at 14:08
That's usually the preferred way. – Günter Zöchbauer Apr 25 '16 at 14:11

score 1 · Answer 3 · edited May 23 '17 at 12:02

1

Yes! It is possible, and I find it can be cleaner in some cases, although for your use case I think a service is preferrable. See my answer to the original question about interfaces. I maybe should have posted it here.

https://stackoverflow.com/a/41151492/4293638

edited May 23 '17 at 12:02

Community

1
1

answered Dec 14 '16 at 20:24

Kyle Zimmer

300
2
7

Angular2 -- @ViewChild from TypeScript base abstract class

3 Answers3