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

【问题标题】：How to load component conditionally in angular on button click如何在按钮单击时以角度有条件地加载组件
【发布时间】：2019-06-14 09:50:27
【问题描述】：

我对 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;
   }

【问题讨论】：

您正在传递 string('0') 并使用数字 0 进行检查，要么将 === 设置为 ==，要么在两边都传递数字。

标签： javascript angular

【解决方案1】：

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

check stackblitz link here

<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>

【讨论】：

【解决方案2】：

您在 onTabClick() 中将 0,1,2 作为字符串传递，而在 .ts 文件中您将 tabIndex 作为整数。

【讨论】：

【解决方案3】：

您正在传递参数 0,1,2 （如字符串）并使用 === 检查条件它还检查类型（意味着刺或数字）

可能的解决方案：

用==代替===
将参数 '1' 更改为 1，'2' 更改为 2

【讨论】：