Question

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

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

Answer 2

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

Answer 3

您正在传递参数0,1,2，例如字符串，并使用===检查条件它也在检查类型（表示字符串或数字）

解决方案

地点==由===
插入（或）
将argumens的“ 1”更改为1，将“ 2”更改为2

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

3 个答案: