在带有图表和表格的角度中分页符

Question

我有一个html，其中app-sales-by-category-total是一个使用chartjs的组件。这有多个图表，因为它在for循环中。

<div class="sales-cat-total">
  <h2>Sales By Category Total</h2>
  <div class="app-wrapper">
    <ng-container *ngFor="let division of categoryTotalData.divisions">
        <div class="category-tag">
          <div class="cat-item division" [ngStyle]="setBgColor(division.name)">
              <app-sales-by-category-total [month]="categoryTotalData.months" [division]="division"></app-sales-by-category-total>
          </div>
        </div>          
    </ng-container>
  </div>
</div>

分页符不起作用。这是我的css

.app-wrapper,
.sales-cat-total {
    page-break-after: always; 
    page-break-inside: avoid; 
    -webkit-region-break-inside: avoid;
    break-inside: avoid-page;
}

这是输出

​

​

即使在表格中，分页符似乎在css中也不起作用：

table {
    page-break-inside: auto;
}

tr {
    page-break-inside: avoid;
}

Answer 1

嘿，你可以添加br标签

    <ng-container *ngFor="let division of categoryTotalData.divisions">
            <div class="category-tag">
              <div class="cat-item division" [ngStyle]="setBgColor(division.name)">
                  <app-sales-by-category-total [month]="categoryTotalData.months" [division]="division"></app-sales-by-category-total>
              </div>
            </div>   
            </br>       
        </ng-container>

Answer 2

这要归功于ViewEncapsulation。为了改变孩子的视图，你需要使用ng-deep伪类

app-sales-by-category-total ::ng-deep {
  table {
    // Style goes here
  }
}