Отображение дополнительной информации в ячейке, когда строка находится в сетке - PullRequest
Новая
       6

Отображение дополнительной информации в ячейке, когда строка находится в сетке

3 голосов
/ 11 января 2020

Я использую angular (^ 8.2.14) и ag-grid-community (^ 20.1.0).

Я пытаюсь добиться следующего эффекта: когда пользователь наводит указатель c строка, в одном столбце показана дополнительная кнопка, на которую можно нажать.

Что работает? Столбец с требуемым поведением обрабатывается пользовательским компонентом средства визуализации ячеек, который реализует интерфейс ICellRendererAngularComponent . Там я могу внедрить ElementRef и в ловушку жизненного цикла AfterContentChecked Я проверяю родительский родительский класс для css -класса 'ag-row-hover' и, если он там есть, я покажу эту дополнительную кнопку в компонент рендерера.

custom-cell.component.ts 

@Component({
  selector: 'app-custom-cell',
  template: `
      <ng-container *ngIf="hovered; else notHovered">{{form.value * form.value}}
        <button (click)="doStuff(form.value)">show root</button></ng-container>
      <ng-template #notHovered>{{form.value + form.value}}</ng-template>
  `,
})
export class CustomCellComponent implements ICellRendererAngularComp, AfterContentChecked {
  form: FormControl;
  params: ICellRendererParams;
  hovered = false;

  constructor(private elementRef: ElementRef) {
  }

  doStuff(val) {
    alert(val);
  }

  ngAfterContentChecked() {
    this.hovered = (this.elementRef.nativeElement as HTMLElement)
      .parentElement
      .parentElement
      .classList.contains('ag-row-hover');
  }
}

Исходный код для этого на github

Что я хочу улучшить? Я хочу улучшить производительность и не имея явных проверок на это поведение. Я предпочел бы иметь директиву с css -селектором '.ag-row', которую я могу вставить в ICellRendererAngularComponent, а затем проверять наличие css класса '.ag-row-hover' при каждой проверке. Или иметь директиву с css -селектором '.ag-row-hover', который есть или нет. У кого-нибудь есть идеи, как улучшить мое существующее решение?

1 Ответ

1 голос
/ 14 января 2020

На самом деле вы можете достичь желаемого поведения только с CSS, без необходимости внедрять ElementRef или делать что-либо с помощью Angular Обратных вызовов жизненного цикла.

При этом ваш пользовательский рендер может выглядеть примерно так: 

@Component({
  selector: "app-custom-cell",
  template: `
    <span style="color: red;">
      <div class="visible-on-hover">
        {{ form.value * form.value }}
        <button (click)="doStuff(form.value)">show root</button>
      </div>
      <div class="hidden-on-hover">{{ form.value + form.value }}</div>
    </span>
  `
})
export class CustomCellComponent
  implements ICellRendererAngularComp {
  form: FormControl;
  params: ICellRendererParams;

  constructor() {}

  doStuff(val) {
    alert(val);
  }

//... other stuff 

}

В ваших стилях.s css (или где-то лучше подходит, просто убедитесь, что стили применяются ), просто добавьте эти правила: 

div.visible-on-hover {
  display: none;
}

.ag-row-hover {
  div.visible-on-hover {
    display: block;
  }

  div.hidden-on-hover {
    display: none;
  }
}

Концептуально, движок рендеринга браузера делает то, что вы сделали в ngAfterContentChecked ().

...