在 React 中，我可以在我的 JSX 中做這樣的事情：
loggedIn ? <Avatar /> : <SignInButton />
現在轉向 Angular（為了作業，所以我必須使用它），顯然范式是不同的，但是有沒有一種干凈的方法來做到這一點？我見過的最好的是：
<ng-container *ngIf="user$ | async as loggedIn; else signInButtonTemplate">
<application-avatar></application-avatar>
</ng-container>
<ng-template #signInButtonTemplate>
<application-sign-in-button></application-sign-in-button>
</ng-template>
這種方法本質上斷開了條件邏輯，通常甚至進一步將模板與實際條件分開，因為大多數開發人員將其放在檔案的底部，因此布局的其余部分更易于閱讀。它不干凈，而且太冗長，以至于每天都令人沮喪。
我希望我可以創建一個組件（或不確定的指令），例如：
<if-else [condition]="loggedIn">
<avatar #if></avatar>
<sign-in-button #else></sign-in-button>
</if-else>
并讓它不實際呈現<if-else>包裝元素，并且僅基于條件呈現兩個子元素之一。我們可以在代碼庫中的任何地方使用它，而不是臃腫的*ngIf樣式。條件邏輯和正負情況包含在一個塊中。在我看來，這更清晰，并且很好奇 Angular 是否可以實作這樣的功能，如果可以，最好的方法是什么？
uj5u.com熱心網友回復：
也許一個開關更接近你想要的？
<ng-container [ngSwitch]="loggedIn">
<application-avatar *ngSwitchCase="true"></application-avatar>
<application-sign-in-button *ngSwitchCase="false"></application-sign-in-button>
</ng-container>
uj5u.com熱心網友回復：
好吧，你可以創建一個像
@Component({
selector: 'if-else',
template:`
<ng-content *ngIf="condition" select="[if]"></ng-content>
<ng-content *ngIf="!condition" select="[else]"></ng-content>
`
})
export class IfElseComponent {
@Input() condition
}
你用像
<if-else [condition]="condition">
<hello if [name]="name"></hello>
<by else [name]="name"></by>
</if-else>
看到一個傻瓜stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/345443.html
標籤：javascript 反应 有角的 条件语句 angular-ng-if
上一篇：未捕獲（承諾）型別錯誤：無法將未定義或空值轉換為物件-角度9
下一篇：為什么堆使用量不斷增加？