使用ngContainer还是ngTemplate？

Question

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

我想我可以在ngContainer中使用ngTemplate或kendo-ui-column

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

那有什么选择？

[Stackblize Demo或telerik grid

Answer 1

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

[<ng-template>可能具有令人讨厌的语法，如果您需要标记的视图“片段”，则使用该语法。

Answer 2

可以为列设置所需的width，并使用样式属性white-space: normal。

As mdn says about white-space：

空白序列被折叠。换行符源的处理方式与其他空白相同。线断为必须填写线框。

因此整个代码应如下所示：

<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>及其内容在默认情况下为

从不

显示！这对于定义可重复块或一些后备模板非常有用，但是您必须显式地“调用”它以使其出现在屏幕上。一个非常流行的用例是ngIfElse用例：

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

如果定义了名称，则您将在屏幕上看到Hello with name，否则，您将看到匿名Hello。与ng-container类似，仅ng-template的内容将包含在DOM中，此元素本身无法设置样式。
在您的情况下，尝试使用简单块并在其上添加一些样式，您应该能够实现所需的功能。
为了更好地理解<ng-container>和<ng-template>，我建议您this blog post和official docs