What causes the difference between angular 8 and angular 13?

Question

I have a piece of code of custom component. Here are related code:

@Component({
selector: 'scrs-tab-container',
template: `<ng-contnet></ngcontent>`,
styleUrls: ['./tab-container.component.scss']
})
export class TabContainerComponent implements OnInit {
    @ContentChildren(forwardRef(() => TabComponent)) tabs: QueryList<TabComponent>;
}

@Component({
    selector: 'scrs-tab',
    template: `<a><ng-content></ng-content></a>`,
    styleUrls: ['./tab.component.scss']
})
export class TabComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
    @ContentChildren(RouterLink, { descendants: true }) links: QueryList<RouterLink>;

    ngAfterContentInit(): void {
        console.log(this.links.length);
    }
}

And the HTLML to use these components is:

<scrs-tab-container>
    <scrs-tab routerLink="./page1">Page 1</scrs-tab>
    <scrs-tab routerLink="./page2">Page 2</scrs-tab>
</scrs-tab-container>

The links console output is 1 for old angular version 8 & 9, but is 0 for latest angular 13 & 12 & 11 & 10.

Here are the quick comparison of the same code in different versions of Angular on stackblitz.com:

• Angular 13 - output 0
• Angular 12 - output 0
• Angular 11 - output 0
• Angular 10 - output 0
• Angular 9 - output 1
• Angular 8 - output 1

If you check the console output, you will see output 1 in angular 8 & 9; and output 0 in angular 10 & 11 & 12 & 13.

I am guessing this difference was caused by this item change in Angular 10:

@ContentChild and @ContentChildren queries will no longer be able to match their directive's own host node (previously, these queries would match the host node in addition to its content children).

Reference: https://v10.angular.io/guide/ivy-compatibility

But I am not sure how to revise the code to make output to be 1. Any help?

Thanks!