通用分页组件

Question

grid.component.ts

import { Component, ContentChildren, OnInit, QueryList } from '@angular/core'

@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.scss'],
})
export class GridComponent implements OnInit {
    @ContentChildren(Component) children = new QueryList<Component>()

    constructor() {}

    ngOnInit() {
        console.log('From grid: ', this.children.length)
    }
}

grid.component.scss

:host {
    display: grid;    
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
}

grid.component.html

<ng-content></ng-content>

我希望确定网格中的元素数量，然后仅显示其中的前10个。我在想我可以让孩子们看到，但是我不确定如何通用地给他们看。

示例 app.component.html

<app-grid>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</app-grid>

<app-grid>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</app-grid>

由此，网格组件将记录3和4。

编辑：

一种解决方案是在打字稿文件中执行以下操作

从'@ angular / core'导入{Component，ElementRef，OnInit}

@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid-paginated.component.scss'],
})
export class GridPaginatedComponent implements OnInit {
    constructor(private elt: ElementRef) {}

    ngOnInit() {
        const children: NodeList = this.elt.nativeElement.childNodes
        console.log(children.length)
        children.forEach(element => {
            console.log(element)
        })
    }
}

但是，我不确定如何仅以Angular类型的方式显示前10个（即在数字10之后的每个元素上不添加display: none）