Angular2：使用NG-ZORRO的tabs结合路由复用策略实现动态tab

-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

angular的版本可以通过查看angular.js的文档来具体查看，可以在angular的网站上下载到各个版本的angular文件。

angularjs的基本用法：

如图所示，第一步就是建好一个关于angularJS的相关项目结构。

然后引入angularJS对应的插件，这样我们使用angularJS语法才不会报错哦。

ng-app放置在body里面，这样body就是整个应用程序的根目录了。

然后我们用model绑定input，并且把input的值绑定到变量“jingyan”里面。

使用花括号可以解析变量，如图，我还给变量添加了样式。

最后，测试一下，我们输入什么就会显示什么，这是因为它已经双向绑定了。

---