我可以 select ng-content 在 ng-container（或其他）中嗎？

Question

我有一個帶有ng-content選擇特定元素的組件，但是當我將元素包裝在ng-container時，它不會呈現。

我需要ng-content的 select 是特定的，這樣我就可以排除其他元素的呈現，這樣我就可以保持代碼的清潔和預期。

成分：

<ng-content select="input"></ng-content>

內容：

<input id="1" />
<input id="2" />
<ng-container *ngIf="condition"> <!-- Condition has a thruthy value -->
    <input [id]="item + 2" *ngFor="let item of [1, 2, 3, 4]" />
</ng-container>

Output

<input id="1" />
<input id="2" />

預計 output

<input id="1" />
<input id="2" />
<input id="3" />
<input id="4" />
<input id="5" />
<input id="6" />

我嘗試使用ng-container和ng-template ，但似乎都不起作用。

有誰知道如何解決這個問題，或者是否有可能解決這個問題？

Answer 1

使用ngProjectAs屬性完成此操作

<ng-container ngProjectAs="input" *ngIf="true"> <!-- Condition has a thruthy value -->
  <input [id]="item + 2" *ngFor="let item of [1, 2, 3, 4]" />
</ng-container>

<ng-content select="input"></ng-content>