0

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

  • 网格
    • 标题
    • 项目
    • 页脚

这是我的网格组件模板：

<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]并将其用作指令<div app-grid-header></div>，但这并没有解决问题。

我还尝试更改encapsulation为其他可能的选项，但没有一个产生影响。

为了使这项工作按需要进行，我必须进行哪些更改？

4

1 回答 1

1

当您插入自己的不是典型数据网格组件的组件时，问题就出现了，显示内容的选择器并不总是正常工作。这是 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 开始，这可能行不通，不建议尝试将行包装在数据网格中。出现了许多冲突，并且包装行并没有太多好处。

于 2018-11-01T16:05:16.757 回答