单页面,angular2 路由的懒加载 能实现页面共存吗

发布于 2022-09-04 01:08:09 字数 605 浏览 17 评论 0

  1. 想实现的效果: 点击连接,新建一个多标签页面,在这个多标签页面里面展示路由对应的页面(类似easyui的多标签)

  2. 问题: 我看网上的教程都是, 点击一个链接,会覆盖上一个链接的页面。我的内容区域 永远只有一个页面,是不是单页面应用无法实现我想要的效果

clipboard.png

clipboard.png

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

我偏爱纯白色 2022-09-11 01:08:09

题主的这个问题我反反复复看了3遍,不知道题主想表达的是是不是 a 标签的 taregt 属性实现的效果。。。

https://developer.mozilla.org...

target
该属性指定在何处显示链接的资源。 I在HTML4,这是的名称,或为一个关键字,一个框。 HTML5中,它是一个名字或关键字为,一个浏览上下文(例如,标签,窗口,或内嵌框架)。以下关键字具有特殊的意义:
_self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
_blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
_top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
只有在href属性存在才能使用该属性。

美胚控场 2022-09-11 01:08:09

这种单页很好实现的:

如果是Angular2

写一个Service用来存储Tab(如果刷新后Tab还有的话,最好用localStorage)。

在原始的IFrame位置,放置路由<outlet></outlet>Angular2用来替换为路由输出的。

上面的Tab就是一个简单数组,对应Tab标题和路由。点击后跳转到指定路由,就会根据路由配置,自动替换<outlet></outlet>的内容。

但是有一个问题就是,因为是直接替换的,所有最好保存页面状态,要不切换回来又是初始化的界面。

这只是一种简单的方案,更好的还是每个Tab单独分开。

晚雾 2022-09-11 01:08:09

题主,我也遇到这个问题了,请问题主解决了吗

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文