typescript ngSwitch（开关盒）

Posted 2021-05-21

<nav>
  <div class="nav-content">
    <ul class="tabs tabs-transparent">
      <li class="tab">
        <a (click)="viewMode = 'map'" [class.active]="viewMode == 'map'">Map View</a>
      </li>
      <li class="tab">
        <a (click)="viewMode = 'list'" [class.active]="viewMode == 'list'">List View</a>
      </li>
    </ul>
  </div>
</nav>
<div [ngSwitch]="viewMode">
  <div *ngSwitchCase="'map'">Map View Content</div>
  <div *ngSwitchCase="'list'">List View Content</div>
  <div *ngSwitchDefault>Otherwise</div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  viewMode = 'map';

}