gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:03:33 25 4
gpt4 key购买 nike

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

最佳答案

您已传递字符串作为参数,但检查选项卡中的数字。您可以查看 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>

关于javascript - 如何在按钮单击时有条件地以 Angular 加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56595669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com