Angular4 动态Tab页

项目要求在既有的clever框架上实现动态的tab页加载，在tab页切换时能保持每个tab页的状态，也就是做了哪些修改神马的。

然而原有clever框架上的Tab页是静态的，最开始尝试了用 *ngIf控制tab的是否加载，但出现的问题是无论点击的顺序是什么，这些tab页全都保持了一致的顺序，很显然被毙掉了。

继续在网上找方法，因为现在用的这套clever是基于Bootstrap的，于是去看Bootstrap的文档，文档中给的动态加载Tab要是这样的：

这样的实现方式是说：每当你增加或者删除一个tab选项页，会执行一次*ngFor，重新加载一次所有的页，这就说明并不会保持状态，而且每点一个就全部加载一次所有数据，显然又会被毙掉了。

经历了一次次的折磨，在师哥的帮助下，写出了一种实现方式。最终的效果是这样的：

首先，改变了原来clever的路由组织结构，原来是appRouting下引各个一级Module，在各个一级模块的Routing下引各个二级Component，现在的做法是，在中间加了一个空组件，这里是filling组件，把所有路由引到这个空组件上去，这个空组件通过动态加载组件的方式加载每次点击tab页需要加载的组件。

这里的tabArray和activeIndex数组都是filling组件和full-layout组件共同维护的，full-layout组件是嵌套在clever最外层的框架。full-layout组件如下：

-header.component.css

header组件比较简单，就是一个div设定了高度

siderbar里用到了ng-zorro组件库里的menu组件

在app.component.html里添加两个组件

因为路由懒加载的方式是加载的模块，所以文件结构是这样的

说明一下：

说明一下：

可以看到Page1RouteModule里设置了路由，当访问/page1 这个url，会加载Page1Component组件到页面上

以同样的目录结构建立page2,page3

说明一下：前面提到的page1.module.ts在这里派上了用场，路由懒加载的方式声明路由

将根路由添加到app.module.ts中

修改app.component.html

启动项目访问 http://localhost:4200/page1

现在页面的样子

https://www.cnblogs.com/lovesangel/p/7853364.html

http://www.cnblogs.com/lslgg/p/7700888.html

https://ng.ant.design/docs/getting-started/zh

https://github.com/Ariesssssssss/angular-tab

这个app属于一种Master-Detail布局，即左侧是用户列表，右侧是用户详情

上面同时还展示了在小尺寸设备上的显示效果。响应式的布局使得我们可以通过点击菜单按钮将用户列表隐藏，以及通过分享按钮显示底部的分享视图。

有一些广泛使用的、规范化的app开发流程

本教程假定你已经通过clone或npm install获取到了Angular Material

在HTML文件中引入库文件的连接即可：

下面的插图展示了我们如何规划布局以及确定应用中的主要组件

这里使用简单的线框图来规划布局我们需要的组件和属性。然后使用Angular Material Layout api来对容器进行响应式布局。

在这一步你将使用常规的HTML元素和Angular Material UI组件来渲染和布局每个容器所需要的子元素。

这一步我们将动态替换常规的HTML，并注入伪数据

然后使用angular指令(如：ng-repeat)将HTML替换为动态标记,b并使用{{}}注入数据

这一步，你将会在用户详情区域底部添加一个动态的mbBottomSheet组件,用来向其他用户展示该用户的联系方式。

添加 share 按钮到视图中

添加 makeContact() 函数到控制器中

Angular Material Layout API 使用 flexbox 来让你的DOM容器和元素能流畅地适应你的浏览器视图宽度和高度的变化。它们还是用媒体查询来定义浏览器特定的宽度范围，让你的应用能适应新的视口大小，这些范围以下面的断点为定义：

添加 menu 图标

使用Layout API 和out breakpoint aliases 和组件服务

我们很快的创建了一个不光响应尺寸变化还适应断点值变化的应用

这里你将会使用特别的，更深的主题

通过以上7步和几分钟的工作，我们迅速创建了一个美丽的、自适应的、主题鲜明的、可访问的以及容易保持的Angular Material 应用

想象一下没有Angular Material做这些会是什么样！

(原文的链接就是写的八步所以不要问我第八步去哪了)

---