Angular Clarity создает подкомпоненты для сетки данных - PullRequest
Новая
       5

Angular Clarity создает подкомпоненты для сетки данных

0 голосов
/ 31 октября 2018

Я использую сетку данных Clarity и хотел бы создать меньшие компоненты, чтобы следовать этой структуре:

  • Сетка
    • Заголовок
    • Детали
    • Footer

Это мой шаблон компонента сетки: 

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

Однако сетка все испортила, если я сделаю это так: Bad

Если я избавлюсь от выделенных тупых компонентов и все встроу, сетка будет выглядеть как положено: 

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

Expected

Мне не удалось найти что-либо, чтобы решить эту проблему.

Я попытался изменить шаблон app-grid-header на [app-grid-header] и использовать его в качестве директивы <div app-grid-header></div>, но это не решило проблему.

Я также пытался изменить encapsulation на другие возможные варианты, ни один из них не оказал влияния.

Какое изменение я должен сделать, чтобы сделать эту работу по желанию?

1 Ответ

0 голосов
/ 01 ноября 2018

Проблема возникает, когда вы вставляете свои собственные компоненты, которые не являются типичными компонентами сетки данных, селекторы того, что отображать, не всегда работают правильно. Это ограничение того, как Angular работает в общем, думайте о нем как о CSS-селекторах, которые не совпадают. Это не связано с режимом инкапсуляции, поскольку влияет только на CSS, объявленный в Angular-компонентах, и Clarity не использует это.

Однако вы можете сделать это до такой степени, что вы можете сделать это с данными типа clr-dg-row. Посмотрите эту демонстрацию: https://stackblitz.com/edit/clarity-datagrid-nested-row-7xxlq8?file=app%2Fapp.component.html

В общем, лучше не разбивать сетку данных на более мелкие компоненты, особенно в этом примере, который заставляет вас иметь больше кода, чем если бы вы не разбивали его на части (добавляя больше компонентов). Это чрезмерная оптимизация до такой степени, что у вас больше накладных расходов во многих случаях. Если у вас есть сетка данных, которую нужно использовать повторно, вместо этого оберните всю сетку данных в один компонент.

РЕДАКТИРОВАТЬ: Начиная с Clarity 1.0, это, вероятно, не будет работать, и не рекомендуется пытаться обернуть строки внутри сетки данных. Возникает ряд конфликтов, и от переноса строк выигрыша мало.

...