使用 ng 容器还是 ng 模板？

Question

我有一个格子，header标题很长。 haeder 标题包含两个词。如果我不使用可调整大小的列，则很难看到 header 标题。所以我想把标题分成两行；每行显示一个词。例如，header 标题为 Company VeryVerylongName。我想分成 Company 和 VerrVerylongName。

我想我可以在 kendo-ui-column

中使用 ngContainer 或 ngTemplate

<kendo-grid-column width="40">
  // here I need something...
        </kendo-grid-column>

那么选项是什么？

Stackblize Demo or telerik grid

Answer 1

<ng-container>: 如果您使用嵌套结构指令，如 *ngIf 或 *ngFor

<ng-template> 可能有讨厌的语法，如果您需要要标记的视图 "snippet"，则使用它。

Answer 2

可以为列设置所需的 width 并使用样式属性 white-space: normal 为 <ng-template kendoGridHeaderTemplate>。

<ng-template kendoGridHeaderTemplate>用于设置自定义kendo网格Header模板。

As mdn says about white-space:

Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

所以整个代码应该是这样的：

<kendo-grid [data]="gridData">
      <kendo-grid-column field="Id" >
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{column.field}}({{columnIndex}})
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="Company VeryVerylongName" [width]="180">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              <span style="white-space: normal">{{column.field}}({{columnIndex}})</span>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="Contact VeryVerylongName">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{column.field}}({{columnIndex}})
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="ContactTitle">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{column.field}}({{columnIndex}})
            </ng-template>
        </kendo-grid-column> 
        <kendo-grid-column field="City">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              {{column.field}}({{columnIndex}})
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

可以在work stackblitz example看到。

Answer 3

我认为这些选项都不适合您的情况。

<ng-container> 是 Angular 元素，适用于在宿主元素上需要多个结构指令的情况（例如，您希望 *ngFor 和 *ngIf 都在同一元素上）。在这种情况下，你可以把 .一旦 Angular 评估模板，只有元素的内容将包含在 DOM 中，但会排除自身，因此您不会引入另一个级别的 HTML 这就是您无法绑定的原因任何样式。

<ng-template> 而它的内容默认是 never 显示！它对于定义可重复块或一些回退的模板非常有用，但你必须明确地'call'它才能让它出现在屏幕上。

一个非常流行的用例是 ngIfElse 案例：

  <ng-container *ngIf="name; else anonymous">Hello {{name}}</ng-container>
  <!-- ... -->
  <ng-template #anonymous>
    Hello stranger!
  </ng-template>

如果定义了名称，您将在屏幕上看到“Hello with name”，否则您将看到“Hello anonymous”。与 ng-container 类似，只有 ng-template 的内容将包含在 DOM 此元素本身无法设置样式。

在你的情况下，尝试使用简单的块并在其上添加一些样式，你应该能够实现你想要的。

为了更好地理解 <ng-container> 和 <ng-template> 我建议你 this blog post and official docs

使用 ng 容器还是 ng 模板？

Using ngContainer or ngTemplate?

kendo-ui-angular2

angular