Angular Clarity为数据网格创建子组件

Question

我正在使用Clarity的数据网格，并希望构建更小的组件以遵循以下结构：

• 网格
  • 标题
  • 物品
  • 脚步

这是我的网格组件模板：

String

那是我的网格标题：

Object

那是我的网格项目：

<clr-datagrid>
    <app-grid-header></app-grid-header>

    <app-grid-item *ngFor="let city of cities$ | async" [city]="city"></app-grid-item>

    <clr-dg-footer>{{(cities$ | async).length}} cities</clr-dg-footer>
</clr-datagrid>

但是，如果我这样做的话，所有的网格都会被弄乱：

如果我摆脱了专用的笨拙组件，并且内联了所有内容，则网格将按预期显示：

import { Component } from '@angular/core';

@Component({
    selector: 'app-grid-header',
    template: `
        <clr-dg-column>City</clr-dg-column>
        <clr-dg-column>Capital</clr-dg-column>
        <clr-dg-column>Population</clr-dg-column>
        <clr-dg-column>Country</clr-dg-column>
    `
})
export class GridHeaderComponent {}

我找不到任何解决此类问题的方法。

我试图将import { Component, Input } from '@angular/core'; import { City } from '../city.model'; @Component({ selector: 'app-grid-item', template: ` <clr-dg-row> <clr-dg-cell>{{city.name}}</clr-dg-cell> <clr-dg-cell>{{city.capital}}</clr-dg-cell> <clr-dg-cell>{{city.population}}</clr-dg-cell> <clr-dg-cell>{{city.country.name}}</clr-dg-cell> </clr-dg-row> ` }) export class GridItemComponent { @Input() city: City; } 模板更改为<clr-datagrid> <clr-dg-column>City</clr-dg-column> <clr-dg-column>Capital</clr-dg-column> <clr-dg-column>Population</clr-dg-column> <clr-dg-column>Country</clr-dg-column> <clr-dg-row *ngFor="let city of cities$ | async"> <clr-dg-cell>{{city.name}}</clr-dg-cell> <clr-dg-cell>{{city.capital}}</clr-dg-cell> <clr-dg-cell>{{city.population}}</clr-dg-cell> <clr-dg-cell>{{city.country.name}}</clr-dg-cell> </clr-dg-row> <clr-dg-footer>{{(cities$ | async).length}} cities</clr-dg-footer> </clr-datagrid> 并将其用作指令app-grid-header，但这不能解决问题。

我还尝试将[app-grid-header]更改为其他可能的选项，但没有一个起作用。

要使此功能按预期工作，我必须进行哪些更改？

Answer 1

问题是，当您插入自己的不是典型的datagrid组件的组件时，用于显示内容的选择器并不总是能正常工作。这是Angular一般工作方式的局限性，就像不匹配的CSS选择器一样。这与封装模式无关，因为它只会影响在Angular组件中声明的CSS，而Clarity不会使用它。

但是，您可以做到这一点，在某种程度上可以使用clr-dg-row类型数据来做到这一点。观看此演示：https://stackblitz.com/edit/clarity-datagrid-nested-row-7xxlq8?file=app%2Fapp.component.html

通常，最好不要将数据网格分解为较小的组件，尤其是在此示例中，与不将其拆分（通过添加更多组件）相比，这会使您拥有更多代码。在很多情况下，这超出了优化的程度，以至于您需要更多的开销。如果您有数据网格，则需要重用，然后将整个数据网格包装到单个组件中。

编辑：从Clarity 1.0开始，这可能行不通，建议不要尝试将行包装到datagrid内部。发生了许多冲突，并且包装行并没有太大好处。