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

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链接：在此处检查 stackblitz 链接<div class="tab">&nbsp; <button class="tablinks" (click)="onTabClick(0)">Transmit</button>&nbsp; <button class="tablinks" (click)="onTabClick(1)">Published</button>&nbsp; <button class="tablinks" (click)="onTabClick(2)">Bulk Transmit</button></div><div>&nbsp; <app-sports&nbsp; *ngIf="tabIndex === 0"></app-sports>&nbsp; <app-movies&nbsp; *ngIf="tabIndex === 2"></app-movies></div>

Answer 2

您正在传递参数 0,1,2 之类的字符串并使用===&nbsp;它检查条件'还检查类型（意味着刺痛或数字）可能的解决方案：将==代替===变化argumens'1'来1，'2'到2