配置组件中的组输入(组件配置语法)

Question

我有一个非常复杂的组件，它有大量的**@ lot ()**s。为了便于阅读，我想像DexExtreme的网格一样对输入进行分组。

DevExtreme网格有大量的输入，它们按如下方式划分它们：

<dx-data-grid
    [dataSource]="dataSource"
    [remoteOperations]="false">

    <dxo-paging [pageSize]="10"></dxo-paging>

</dx-data-grid>

如您所见，分页参数不是直接传递给dx-data-grid，而是通过子组件dxo-paging传递的。当您有非常可配置的组件时，我认为这是一个非常好的方法。

有人知道如何取得同样的结果吗？

非常感谢

Answer 1

这实际上不是对输入进行分组，而是组合组件。这里使用的关键特性是角上的内容投影。它允许您使用从外部传递的其他组件填充父组件中的预定义槽。

您提供的示例将具有以下结构。我们有两个组件:父DxDataGridComponent和子DxoPagingComponent。您可以根据自己的意愿对这两个输入进行定义。然后父组件需要有一个<ng-content>插槽，其子组件将被投影到其中。

此外，还可以使用@ContentChild获取父组件中对此子组件的引用。

@Component({
    selector: 'dxo-paging',
    template: `
      <!-- Paging stuff -->
    `
})
export class DxoPagingComponent {
    @Input() pageSize;
}

@Component({
    selector: 'dx-data-grid',
    template: `
    <!-- DataGrid stuff -->
    <table>
    </table>
    <ng-content></ng-content>
  `
})
export class DxDataGridComponent implements AfterContentInit {
    @Input() dataSource;
    @Input() remoteOperations;
    @ContentChild(DxoPagingComponent)
    pagingComp: DxoPagingComponent;

    ngAfterContentInit() {
      console.log('Content initialized', this.pagingComp.pageSize);
    }
}