angular4实现tab栏切换的方法分享

来源：动视网责编：小OO 时间：2020-11-27 20:07:34

angular4实现tab栏切换的方法分享

管理系统 tab 切换页，是一种常见的需求，大概如下：点击左边菜单，右边显示相应的选项卡，然后不同的选项卡面可以同时编辑，切换时信息不掉失。用php或.net，java的开发技术，大概是切换显示，然后加一个ifram来做到，或者通过ajax加载信息显示相应的层。但是如果用angular 要如何实现呢？第一个想法，是否可以用同样的ifarm来实现呢。第二个想到的是路由插座大概是这样的。代码如下：

推荐度：

点击下载本文 文档为doc格式

导读管理系统 tab 切换页，是一种常见的需求，大概如下：点击左边菜单，右边显示相应的选项卡，然后不同的选项卡面可以同时编辑，切换时信息不掉失。用php或.net，java的开发技术，大概是切换显示，然后加一个ifram来做到，或者通过ajax加载信息显示相应的层。但是如果用angular 要如何实现呢？第一个想法，是否可以用同样的ifarm来实现呢。第二个想到的是路由插座大概是这样的。代码如下：

本文主要介绍了angular4实现tab栏切换的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

管理系统 tab 切换页，是一种常见的需求，大概如下：

点击左边菜单，右边显示相应的选项卡，然后不同的选项卡面可以同时编辑，切换时信息不掉失！

用php或.net,java的开发技术,大概是切换显示,然后加一个ifram来做到，或者通过ajax加载信息显示相应的层.

但是如果用angular 要如何实现呢？第一个想法，是否可以用同样的ifarm来实现呢？

第二个想到的是路由插座大概是这样的

代码如下:

<router-outlet name="main-content" (activate)="activate($event)" (deactivate)='onDeactivate($event)' ></router-outlet>

但都没能实现，于是在想一个简单的tab页面就这么难吗？

或者真的没有什么简单的方法了吗？

很长一段时间，没有去管这个了

因为我知道自己对angular的理解和学习还不够，于是就放下了很长一段时间，直到在知乎看到一篇文章

Angular路由复用策略

于是有了一种思路，花了半天的时间终于实现了anguar 4 tab 切换页大概思路实现如下：

一、实现 RouteReuseStrategy 接口自定义一个路由利用策略

SimpleReuseStrategy.ts代码如下：

二、策略注册到模块当中：

上面两步基本上实现了复用策略但要实现第一张效果图，还是要做一些其它工作

三、定义路由添加一些data数据路由代码如下：

四、在<router-outlet></router-outlet> component 实现路由事件 events，app.component代码如下：

app.html 的代码如下：

<p class="row">
 <p class="col-md-4">
 <ul>
 <li><a routerLinkActive="active" routerLink="/home">首页</a></li>
 <li><a routerLinkActive="active" routerLink="/about">关于我们</a></li>
 <li><a routerLinkActive="active" routerLink="/news">新闻中心</a></li>
 <li><a routerLinkActive="active" routerLink="/contact">联系我们</a></li>
 </ul>
 </p>
 <p class="col-md-8">
 <p class="crumbs clearfix">
 <ul>
 <ng-container *ngFor="let menu of menuList">
 <ng-container *ngIf="menu.isSelect">
 <li class="isSelect">
 <a routerLink="/{{ menu.module }}">{{ menu.title }}</a> 
 <span (click)="closeUrl(menu.module,menu.isSelect)">X</span> 
 </li>
 </ng-container>
 <ng-container *ngIf="!menu.isSelect">
 <li>
 <a routerLink="/{{ menu.module }}">{{ menu.title }}</a> 
 <span (click)="closeUrl(menu.module,menu.isSelect)">X</span> 
 </li>
 </ng-container>
 </ng-container>
 </ul>
 </p>
 <router-outlet></router-outlet>
 </p>
</p>

整体效果如下：

最终点击菜单显示相应的标签选中，可以切换编辑内容，关闭标签时，重新点击菜单可以重新加载内容。

angular4实现tab栏切换的方法分享

推荐度：

点击下载本文 文档为doc格式

标签： angular4实现的tab栏切换 angular4实现tab栏切换的方法 angulartab

热门焦点

angular4实现tab栏切换的方法分享

angular4实现tab栏切换的方法分享

angular4实现tab栏切换的方法分享

最新推荐

猜你喜欢

热门推荐