时间戳

首页 > 解决方案 > 如何在按钮单击时以角度有条件地加载组件

javascript - 如何在按钮单击时以角度有条件地加载组件

问题描述

我对 Angular 很陌生。

我想通过单击按钮在组件内有条件地加载子组件。单击按钮时，它应该重新渲染相应的子组件。

HTML 代码

<div class="tab">
  <button class="tablinks" (click)="onTabClick('0')">Transmit</button>
  <button class="tablinks" (click)="onTabClick('1')">Published</button>
  <button class="tablinks" (click)="onTabClick('2')">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

TS文件

tabIndex = 2 ;


  onTabClick(index){
        this.tabIndex = index;
   }

标签： javascriptangular

解决方案

您已将字符串作为参数传递，但在选项卡中检查数字。您可以查看 stackblitz 链接：

在此处查看 stackblitz 链接

<div class="tab">
  <button class="tablinks" (click)="onTabClick(0)">Transmit</button>
  <button class="tablinks" (click)="onTabClick(1)">Published</button>
  <button class="tablinks" (click)="onTabClick(2)">Bulk Transmit</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

推荐阅读