JavaScript Angular ContentChild(ren) undefined

[-Rayz-]

Hallo mal wieder,

ich habe hier ein Problem mit dem ContentChild bzw. Contentchildren. Ich bekomme es nicht hin, dass das dort irgenderwas drin steht. Ob jetzt ContentChild oder Children und Querylist macht keinen Unterschied. Auch ob ich als Selector eine Klasse nehme oder selector. Ergebnis bleibt gleich. forwardref und descendents bringen auch nichts. Ergo -> bin ratlos.
Abfragen erfolgen im AfterInit bzw wenn ich einen Button drücke.

Das hier habe ich bis jetzt getestet: Über eine Direktive appPreview, dann noch über die Basisklasse von app-foo und halt über #test.

@Component({
    selector: 'app-bar',  
    template: '<div #test></div><app-foo appPreview></app-foo>'
})
export class BarComponent implements OnInit, AfterContentInit {
    @ContentChildren(BaseComponent, { descendants: true }) private contentItems: QueryList<BaseComponent>;
    @ContentChildren(PreviewDirective, { descendants: true }) private contentItems2: QueryList<PreviewDirective>;
    @ContentChildren(forwardRef(() => PreviewDirective))private item: QueryList<PreviewDirective>;
    @ContentChildren(forwardRef(() => BaseComponent))private item2: QueryList<BaseComponent>;
    @ContentChild('test') children: any;
    @ContentChild(PreviewDirective) children2: any;
    @ContentChild(BaseComponent) children3: any;

    constructor(){}

    ngOnInit(): void {
     
    }
    ngAfterContentInit(): void {
        console.log(this.contentItems.toArray());
        console.log(this.contentItems2.toArray());
        console.log(this.item.toArray());
        console.log(this.item2.toArray());
        console.log(this.children);
        console.log(this.children2);
        console.log(this.children3);
    }

Ergebnis ist immer undefined oder leer. Egal zu welchem Zeitpunkt ich die Abfrage mache..

 

[DefconDev]

Liegt hier nicht ein Syntax-Fehler beim Konstruktor vor?

 

[-Rayz-]

beim löschen passiert. Hab ja nicht die komplette Component hier rein kopiert.

ps: habs geändert :-)

 

[benneq]

Ich denke du verwechselst hier ContentChild mit ViewChild

https://www.joshmorony.com/the-difference-between-viewchildren-and-contentchildren/

 

[-Rayz-]

Glaube... das könnte sein. Allerdings müsste ich eh ng-content nutzen und hab es nur zum testen außen vor gelassen... ich teste es nochmal ^^

Ergänzung (26. Mai 2020)

<app-main>
    <app-tab-panel
        <ng-container class="myTabPanel">
            <app-child appPreview />
            <app-child appPreview />
                ..
    <app-tab-panel>
   
</app-main>

<app-tab-panel>
        <ng-content select=".myTabPanel"></ng-content>
</app-tab-panel>

@Component({
    selector: 'app-tab-panel',
    templateUrl: './tab-panel.component.html',
    styleUrls: ['./tab-panel.component.scss']
})
export class TabPanelComponent implements OnInit, AfterContentInit {

@ContentChildren(PreviewDirective, { descendants: true }) private contentItems2: QueryList<PreviewDirective>;

...
ngAfterContentInit(): void {
        console.log(this.contentItems2.toArray());
}....

So geht es nun :-)

Wobei ich noch nicht verstehe wieso es nicht auch über die Basisklasse geht.. aber nun gut, nutze ich halt die Direktive

Eine Sache noch. Ich habe in der Basisklasse ein Output Event definiert und eigentlich hatte ich vor, über ContentChildren darauf zuzugreifen. Ist das überhaupt möglich?
Könnte ich ContentChildren über die Basisklasse erstellen, ginge das ja... glaube ich