我对 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链接:
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句