我有一個關于要呈現的 DIV的類部分。它按預期作業。
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates>
<div class="section">...</div>
</ng-template>
我嘗試將類分配移動到包含指令的 DIV。但是，演繹沒有奏效。
<div *ngIf="decoded; then coordinates" class="section"></div>
<ng-template #coordinates>
<div>...</div>
</ng-template>
外部 DIV 整體消失，被模板的內容取代。這讓我很煩惱，因為如果我的模板中有多個組件，我不得不在模板中的所有內容周圍添加一個額外的 DIV。（另外，對我來說似乎有點奇怪，我們不保留標簽的任何屬性，*ngIf并且可以使用任意屬性，而它似乎適用于*ngFor.）
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates>
<div class="section">
<div>...</div>
<span>...</span>
<bzz>...</bzz>
</div>
</ng-template>
我嘗試通過在模板上設定類來欺騙瀏覽器，但由于它實際上并沒有像這樣在 DOM 中呈現，所以它當然失敗了。
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates class="section">
<div...</div>
</ng-template>
有沒有辦法強制帶有條件指令的 DIV 在根據模板的內容呈現時保留其類？
uj5u.com熱心網友回復：
您可以嘗試使用ng-container并應用*ngIf它，在這種情況下它應該可以按您的預期作業
<div class="section">
<ng-container *ngIf="decoded; then coordinates"></ng-container>
</div>
<ng-template #coordinates>
<div>...</div>
</ng-template>
uj5u.com熱心網友回復：
TL;DR：Angular 正在做你要求它做的事情；您曾經then告訴它在真實情況下渲染指令所在的元素以外的其他內容。如果這不是您想要的行為，請不要這樣做。
結構指令*ngIf和*ngFor實際上是一種擴展的簡寫（這曾經被稱為“desugaring” ），請查看https://angular.io/guide/structural-directives中的示例或更具體的https://angular .io/api/common/NgIf#description：
具有速記語法的簡單形式：
<div *ngIf="condition">Content to render when condition is true.</div>具有擴展語法的簡單形式：
<ng-template [ngIf]="condition"> <div>Content to render when condition is true.</div> </ng-template>
請注意，所有內容都包含在ng-templates 中以進行條件渲染。
如果您這樣撰寫模板：
<div *ngIf="decoded" class="section">...</div>
它將擴展到：
<ng-template [ngIf]="decoded">
<div class="section">...</div>
</ng-template>
實際呈現的是：
<div class="section">...</div>
請注意，仍然包含該類，這與您在其他結構指令中所經歷的一致。
但是，當您使用 時then，速記：
<div *ngIf="decoded; then coordinates" class="section"></div>
<ng-template #coordinates>
<div>...</div>
</ng-template>
擴展為：
<ng-template [ngIf]="decoded" [ngIfThen]="coordinates">
<div class="section"></div>
</ng-template>
<ng-template #coordinates>
<div>...</div>
</ng-template>
第一個的內容ng-template現在無關緊要，因為這不是在任何一種情況下呈現的內容。它要么渲染#coordinates模板內容，要么什么都不渲染，所以你得到：
<div>...</div>
你的課似乎消失了。但這就是你所要求的；的關鍵then是不渲染元素*ngIf，在真實情況下，而是渲染其他東西。
有關這些基礎ng-元素的更多資訊，我在我的博客上寫了Angular 的“ng-”元素。
uj5u.com熱心網友回復：
我建議看看這篇很棒的文章關于 Angula 中的 ng-template、ng-content、ng-container 和 *ngTemplateOutlet 你需要知道的一切
它包含您需要了解的有關 Angular 結構指令的所有資訊，并提供了很好的解釋和示例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/444774.html
上一篇：ifconstexprstd::is_same在VS2022下
下一篇：輸入裝飾屬性的角度變化檢測