在Angular 2中的条件语句（if，else）

Question

我以前在.NET和Silverlight工作了几年，现在开始学习Angular 2和Expressjs。 我有一个疑问，即使我找不到如何在angular 2 + Expressjs中完成这个操作，并且是安全的，可以防止客户端攻击吗？

<% if(User.Identity.IsAuthenticated){ %>
     <b>Sign Out</b>
<% } else { %>
     <b>Sign In</b>
<% } %>

- Raimens

Answer 1

如果你需要“else”，最好的方法可能是使用NgSwitch（https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html）。

因此，可以这样做：

<div [ngSwitch]="User?.Identity?.IsAuthenticated">
  <b *ngSwitchCase="true">Sign Out</b>
  <b *ngSwitchDefault>Sign In</b>
</div>

- Sierrodc

Answer 2

使用Angular 4，现在可以实现这一点：

• SYNCHRONOUSLY

  lets assume that we've defined this class variable:

  shown: boolean = true;
  

  If else syntax:

  <button (click)="shown = !shown">toggle 'shown' variable</button>
  <div *ngIf="shown; else elseBlock">If shown</div>
  <ng-template #elseBlock>else not shown</ng-template>
  

  Note that ng-template must be used in order for this structural directive to work, so if you have a custom component, wrap it inside ng-template. Below is an alternative syntax which also binds to the same class variable.

  If then else syntax:

  <button (click)="shown = !shown">toggle 'shown' variable</button>
  <div *ngIf="shown; then primaryBlock; else secondaryBlock"></div>
  <ng-template #primaryBlock>If shown</ng-template>
  <ng-template #secondaryBlock>else not shown</ng-template>
  

  ---

• ASYNCHRONOUSLY

  class:

  userObservable = new Subject<{first: string, last: string}>();
  onButtonClick() {
    this.userObservable.next({first: 'John', last: 'Smith'});
  }
  

  template:

  <button (click)="onButtonClick()">Display User</button>
  <div *ngIf="userObservable | async as user; else loading">
    Hello {{user.last}}, {{user.first}}!
  </div>
  <ng-template #loading>Waiting for click...</ng-template>
  

- Stephen Paul