Question

我知道我的问题的措辞可能有点奇怪，但这就是我想要的：

我有一个div，我希望包围input，但仅限于divIsNeeded。我总是想要显示input字段。

通过文档，我找不到任何东西。有没有办法做到这一点？

<!-- this should only be there if I actually need it, otherwise I don't want this div -->
<div *ngIf="needsInputGroup" class="input-group">
  <!-- this should always be visible -->
  <input type="text" placeholder="bla" />
</div>

Answer 1

<div *ngIf="needsInputGroup" class="input-group">
  <input type="text" placeholder="bla" />
</div>
<input *ngIf="!needsInputGroup" type="text" placeholder="bla" />

您可以创建一个自定义组件，为您执行此操作并在任何地方重复使用。我不认为还有另一种方式。但是自定义组件会在内容周围添加另一个元素

Answer 2

Günter在his answer中的建议是什么，但你必须指定孩子两次。相反，您可以利用<ng-template>元素仅指定子项一次。在这种特殊情况下，这不是问题，因为元素相当简单，但如果内容较大会怎么样？

<ng-template>的内容不会在放置的位置呈现，而是有点像轻量级组件的定义。一旦放置在某处，它将呈现，但不是之前。 ng-template的另一个类比是一个函数：你定义它，但在调用它之前你不会得到结果。

因此，在我们的模板中，我们可以定义内部内容。我们给它一个引用#children，稍后我们将使用它来将模板呈现在别处。

<ng-template #children>
  <input type=text placeholder=bla>
</ng-template>

现在我们根据条件渲染不同的东西。我们通过将其引用（我们给它的名称）传递给结构指令ngTemplateOutlet来渲染模板。

<ng-container *ngIf="needsInputGroup">
  <div class="input-group">
    <ng-container *ngTemplateOutlet="children"></ng-container>
  </div>
</ng-container>

<ng-container *ngIf="!needsInputGroup">
  <ng-container *ngTemplateOutlet="children"></ng-container>
</ng-container>

ng仅用于_this_元素，无论如何都要显示孩子

2 个答案: