ag-grid 不显示样式

Question

我的 ag-grid 出于某种原因没有应用样式：

search-parrots.component.html

<div>
  <ag-grid-angular
    style="width: 100%"
    class="ag-theme-bootstrap parrots-grid"
    [rowData]="filteredparrots"
    [columnDefs]="columns"
    [gridOptions]="gridOptions"
    pagination="true"
    paginationAutoPageSize="false"
    paginationPageSize="100"
    rowSelection='single'
    suppressRowClickSelection='true'
    (rowDoubleClicked)="onRowDoubleClicked($event)"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
    (columnVisible)="onGridColumnStateChanged($event)"
  >
  </ag-grid-angular>
</div>

search-parrots.component.ts

  import {
    Component,
    EventEmitter,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChange,
    SimpleChanges,
    ViewEncapsulation
  } from '@angular/core';
  import {parrot} from "../../../models/parrot/parrot";
  import {GridOptions} from "@ag-grid-enterprise/all-modules";
  import {Employee} from "../../../models/parrot/Employee";
  import {SeniorAssetOwner} from "../../../models/parrot/SeniorAssetOwner";
  import { NavSearchService } from '../../../services/nav-search.service';
  import { GridStateService } from '../../../services/grid/grid.service';

  @Component({
    selector: 'app-search-parrots',
    templateUrl: './search-parrots.component.html',
    styleUrls: ['./search-parrots.component.css']
  })
  export class SearchparrotsComponent implements OnInit, OnChanges{
    @Input() parrots: Array<parrot>;
    @Input() isGridDataLoading: boolean;
    @Input() quickFilterTerm: string;
    @Input() isAdmin: boolean;
    @Input() parrotManager: Employee;
    @Input() assetOwner: SeniorAssetOwner;
    @Input() parrotStatuses: Array<string>;
    @Input() parrotTypes: Array<string>;
    @Output() onparrotSelected = new EventEmitter<string>();

    filteredparrots: Array<parrot>;
    gridOptions: GridOptions = <GridOptions>{};

    private _quickFilterTerm: string;
    private _parrotManager: Employee;
    private _assetOwner: SeniorAssetOwner;
    private _parrotStatuses: Array<string>;
    private _parrotTypes: Array<string>;
    private gridApi = null;
    private gridColumnApi = null;
    private isExternalFilterActive: boolean = false;

    constructor(public navSearchService: NavSearchService,
                private gridStateService: GridStateService) {
      this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this);
      this.gridOptions.doesExternalFilterPass = this.externalFilter.bind(this);
      this.gridOptions.rowHeight = 40;
      this.gridOptions.headerHeight = 40;
      this.gridOptions.rowClass = 'searchResultsRow';

    }
    get data():string {
      return this.navSearchService.searchData;
    }
    set data(value: string) {
      this.navSearchService.searchData = value;
    }
    ngOnInit() {
      this._quickFilterTerm = "";
      this.filteredparrots = this.parrots;
    }

    ngOnChanges(changes: SimpleChanges): void {
      const textFilter: SimpleChange = changes.quickFilterTerm;
      if (textFilter != null && textFilter.currentValue !== textFilter.previousValue) {
        this._quickFilterTerm = textFilter.currentValue;
        this.onQuickFilterChange();
      }
      const navFilter: SimpleChange = changes.data;
      if (navFilter != null && navFilter.currentValue !== navFilter.previousValue) {
        this._quickFilterTerm = navFilter.currentValue;
        this.onQuickFilterChange();
      }
      const parrotManagerChange: SimpleChange = changes.parrotManager;
      if(parrotManagerChange != null && parrotManagerChange.currentValue !== parrotManagerChange.previousValue){
        this._parrotManager = parrotManagerChange.currentValue;
        this.filterparrots();
      }

      const assetOwnerChange: SimpleChange = changes.assetOwner;
      if(assetOwnerChange != null && assetOwnerChange.currentValue !== assetOwnerChange.previousValue){
        this._assetOwner = assetOwnerChange.currentValue;
        this.filterparrots();
      }

      const statusesChange: SimpleChange = changes.parrotStatuses;
      if(statusesChange != null && statusesChange.currentValue !== statusesChange.previousValue){
        this._parrotStatuses = statusesChange.currentValue;
        this.filterparrots();
      }

      const typesChange: SimpleChange = changes.parrotTypes;
      if(typesChange != null && typesChange.currentValue !== typesChange.previousValue){
        this._parrotTypes = typesChange.currentValue;
        this.filterparrots();
      }
    }

    columns = [
      {headerName: 'parrotId', field: 'parrotId', width: 110, suppressSizeToFit: true},

      {headerName: 'parrot Name', field: 'parrotName'},
      {headerName: 'Number', field: 'parrotNumber', width: 110, suppressSizeToFit: true},
      {headerName: 'Cip#', field: 'CipNumber', width: 110, suppressSizeToFit: true},
      {headerName: 'Description', field: 'parrotDescription'}
    ];

    defaultColDef = {
      filter: true,
      cellClass: 'searchResultsCell'
    };

    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      let state = this.gridStateService.getGridState('parrotsGridState', this.columns);
      if(state != null){
        this.gridColumnApi.setColumnState(state);
      }
      if (this.data != undefined ){
        this._quickFilterTerm = this.data;
        this.onQuickFilterChange();
      }
    }

    onGridColumnStateChanged(e){
      let state = this.gridColumnApi.getColumnState();
      localStorage.removeItem("parrotsGridState");
      localStorage.setItem("parrotsGridState", JSON.stringify(state));
    }

    private isExternalFilterPresent(): boolean{
      return this.isExternalFilterActive;
    }

    externalFilter(){
      return true;
    }

    onQuickFilterChange(){
      this.gridApi.setQuickFilter(this._quickFilterTerm);
    }

    onRowDoubleClicked(e){
      this.onparrotSelected.emit(e.data.parrotNumber);
    }

    filterparrots(){
      this.filteredparrots = this.parrots.filter((p: parrot) => this.checkparrot(p));
    }

    checkparrot(parrot: parrot): boolean {
      let managerMatches = false;
      let assetOwnerMatches = false;
      let statusMatches = false;
      let typeMatches = false;

      if (this._parrotManager == null) {
        managerMatches = true;
      }
      else {
        managerMatches = this._parrotManager.EmployeeId == parrot.EmployeeId;
      }

      if (this._assetOwner == null) {
        assetOwnerMatches = true;
      }
      else {
        assetOwnerMatches = this._assetOwner.SeniorAssetOwnerId == parrot.SeniorAssetOwnerId;
      }

      if (this._parrotStatuses == null || this._parrotStatuses.length == 0) {
        statusMatches = true;
      }
      else {
        statusMatches = this._parrotStatuses.includes(parrot.parrotStatusIdFromForm)
      }

      if (this._parrotTypes == null || this._parrotTypes.length == 0) {
        typeMatches = true;
      }
      else {
        typeMatches = this._parrotTypes.includes(parrot.parrotTypeId)
      }

      return managerMatches && assetOwnerMatches && statusMatches && typeMatches;
    }
  }

search-parrots.component.css

.ag-cell {
  overflow: visible;
}
.parrots-grid{
  width: 100%;
  height: calc(100vh - 200px);
}
.parrots-grid span.ag-header-cell-text {
  font-weight: 700 !important;
}
.redFont{
  color: var(--red-font-color)!important;
}
.searchResultsCell {
  padding: 12px;
  vertical-align: top;
}

我做错了什么？为什么没有应用样式？

Answer 1

由于View Encapsulation，未应用样式。

@Component 元数据中指定的样式仅适用于 该组件的模板。

当 ng-deep 伪类被贬值时，这成为 Angular 中的一个紧迫问题。

::ng-deep .ag-cell {
  overflow: visible;
}

它有效 - 但没有人知道多久 - 所以，不要使用它。

解决方法 1：

在根目录中使用style.css 中的规则并将其范围缩小。

.myComponentMainClass {
   .ag-cell {
      overflow: visible;
    }
}

解决方法 2：

在本地级别禁用视图封装（最后的选择！！）。

@component({

  ...
  encapsulation: ViewEncapsulation.None
})

---

一些研究 -

https://www.telerik.com/blogs/understanding-angular-view-encapsulation https://angular.io/api/core/ViewEncapsulation