Angular & CSS:如何在单击按钮时将水平导航栏更改为垂直导航栏

<ul class="horizontal-nav">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

.horizontal-nav {
  display: flex;
  list-style-type: none;
}

.horizontal-nav li {
  margin-right: 10px;
}

export class MyComponent {
  isVerticalNav = false;

  toggleNav() {
    this.isVerticalNav = !this.isVerticalNav;
  }
}

<button (click)="toggleNav()">切换导航栏</button>

<ul [ngClass]="{'horizontal-nav': !isVerticalNav, 'vertical-nav': isVerticalNav}">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

.vertical-nav {
  display: block;
}

.vertical-nav li {
  margin-bottom: 10px;
}