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

公羊

我对 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链接:

在此处检查 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何有条件地包装React组件?

来自分类Dev

如何有条件地加载CSS

来自分类Dev

如何在有条件的js中有条件地应用标题

来自分类Dev

如何在Meteor 1.0中有条件地加载/捆绑CSS文件?

来自分类Dev

有条件地加载Reactjs组件时减少代码冗余

来自分类Dev

如何在有条件的组件上有条件地添加道具?

来自分类Dev

如何有条件地渲染原因反应组件?

来自分类Dev

如何在React中有条件地将子组件添加到父组件?

来自分类Dev

如何有条件地向组件添加文本?

来自分类Dev

如何在Angular中有条件地渲染?

来自分类Dev

如何在WPF中有条件地更改按钮前景颜色?

来自分类Dev

如何在useEffect中更新状态的条件组件中有条件地渲染?

来自分类Dev

如何在React中有条件地将布局应用于组件

来自分类Dev

如何使hbs中的单选按钮有条件地使用addEventListener单击条件

来自分类Dev

如何在redux-form的<Field>中有条件地渲染组件

来自分类Dev

如何在头部使用Modernizr来有条件地加载JS-TypeError产生

来自分类Dev

如何有条件地渲染

来自分类Dev

如何在另一个组件中有条件地添加组件

来自分类Dev

从角度控制器有条件地加载CSS

来自分类Dev

如何在Excel中有条件地匹配

来自分类Dev

我如何有条件地加载我的React组件?

来自分类Dev

如何在Excel中有条件地VLOOKUP?

来自分类Dev

在 React 组件中,如何在迭代列表时有条件地显示样式

来自分类Dev

如何在android中根据CPU架构有条件地加载本机库

来自分类Dev

有条件地加载 .js 文件。如何?

来自分类Dev

有条件地允许单击提交按钮

来自分类Dev

如何有条件地加载 PHP 包含?

来自分类Dev

如何在无状态组件中有条件地更新状态?

来自分类Dev

如何有条件地渲染 Angular 组件

Related 相关文章

  1. 1

    如何有条件地包装React组件?

  2. 2

    如何有条件地加载CSS

  3. 3

    如何在有条件的js中有条件地应用标题

  4. 4

    如何在Meteor 1.0中有条件地加载/捆绑CSS文件?

  5. 5

    有条件地加载Reactjs组件时减少代码冗余

  6. 6

    如何在有条件的组件上有条件地添加道具?

  7. 7

    如何有条件地渲染原因反应组件?

  8. 8

    如何在React中有条件地将子组件添加到父组件?

  9. 9

    如何有条件地向组件添加文本?

  10. 10

    如何在Angular中有条件地渲染?

  11. 11

    如何在WPF中有条件地更改按钮前景颜色?

  12. 12

    如何在useEffect中更新状态的条件组件中有条件地渲染?

  13. 13

    如何在React中有条件地将布局应用于组件

  14. 14

    如何使hbs中的单选按钮有条件地使用addEventListener单击条件

  15. 15

    如何在redux-form的<Field>中有条件地渲染组件

  16. 16

    如何在头部使用Modernizr来有条件地加载JS-TypeError产生

  17. 17

    如何有条件地渲染

  18. 18

    如何在另一个组件中有条件地添加组件

  19. 19

    从角度控制器有条件地加载CSS

  20. 20

    如何在Excel中有条件地匹配

  21. 21

    我如何有条件地加载我的React组件?

  22. 22

    如何在Excel中有条件地VLOOKUP?

  23. 23

    在 React 组件中,如何在迭代列表时有条件地显示样式

  24. 24

    如何在android中根据CPU架构有条件地加载本机库

  25. 25

    有条件地加载 .js 文件。如何?

  26. 26

    有条件地允许单击提交按钮

  27. 27

    如何有条件地加载 PHP 包含?

  28. 28

    如何在无状态组件中有条件地更新状态?

  29. 29

    如何有条件地渲染 Angular 组件

热门标签

归档