Angular 6 @ContentChildren不查询扩展组件

Question

i've got a question about the ContentChildren decorator.

I want to create a controller user interface for the desktop. I created some components to handle the controller input (so a example for, lets say the start page could be this):

• ControllerInputWrapperComponent (extends ControllerContainerComponent)
  • ControllerContainerComponent
    • Panel (extends ControllerContainerComponent)
    • Panel (extends ControllerContainerComponent)
  • ControllerContainerComponent
    • Panel (extends ControllerContainerComponent)
    • Panel (extends ControllerContainerComponent)
    • Panel (extends ControllerContainerComponent)
    • DifPanel (extends ControllerContainerComponent)

The ControllerContainerComponent template looks like this:

<template #host></template> <ng-content></ng-content>

(The template is a optional choice to generate panels by a json template)

Now I want the ControllerContainerComponent to query its children that are instance of ControllerContainerComponent. If i use ControllerContainerComponent as the selector in the @ComponentChildren decorator it returns a empty list after the content has been initialized.

After that I tried to query the exact class (in this case the PanelComponent) and then got some results, but they wouldn't include components like DifPanelComponent

My question is:

Is this a issue with angular or did I do something wrong?

EDIT:

I found a question on stackoverflow that is kind of similiar, but does not quite give the answer I was looking for and is not about the current version of angular: Angular 2 - Using @ContentChildren for filtering a component's content

2nd EDIT:

Here is a stackblitz that demonstrates my problem: https://stackblitz.com/edit/angular-vfmnd3

Answer 1

You may need to provide it. providers:[{provide: ControllerContainerComponent, useExisting:Panel}] Then you'd be able to query it.