[英]How to load component conditionally in angular on button click
我对 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>
您在 onTabClick() 中将 0,1,2 作为字符串传递,而在 .ts 文件中,您将 tabIndex 作为整数传递。
您正在传递参数 0,1,2 之类的字符串并使用===
检查条件,它还检查类型(意味着刺痛或数字)
可能的解决方案:
放置==
而不是===
将参数'1'
更改为1
,将'2'
更改为2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.