Angular 为数据网格创建 sub-components 的清晰度

Question

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

网格
- Header
- 项目
- 页脚

这是我的网格组件模板：

<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>

那是我的网格 header:

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 更改为其他可能的选项，其中 none 产生了影响。

我必须做出什么改变才能使这项工作按预期进行？

Answer 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 开始，这可能行不通，不建议尝试在数据网格内换行。出现了许多冲突，换行并没有太多好处。

Angular 为数据网格创建 sub-components 的清晰度

Angular Clarity creating sub-components for datagrid

angular

vmware-clarity