前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 允许ctrl+点击新窗口打开

Angular 允许ctrl+点击新窗口打开

作者头像
mafeifan
发布2019-05-10 11:55:21
2.4K0
发布2019-05-10 11:55:21
举报
文章被收录于专栏:finleyMafinleyMa

客户希望使用Ctrl+点击链接在新窗口打开新页面。 经过调查可以实现,具体方式:

  1. 修改 app-routing.module.ts 开启hash模式
代码语言:javascript
复制
@NgModule({
  imports: [
    // 加入  {useHash: true}
    RouterModule.forRoot(routes, {useHash: true})
  ],
  exports: [
    RouterModule
  ]
})
  1. 然后修改相关的module文件,比如ad页面的链接需要支持,组件所属于app-ad.module.ts 则打开这个文件
代码语言:javascript
复制
import { NgModule } from '@angular/core';
import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';

......
@NgModule({
  ....
  // 加入这个提供器,
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
  ]
})
export class AppAdModule { }

官方文档 有说明: RouterModule.forRoot 函数把 LocationStrategy 设置成了 PathLocationStrategy,使其成为了默认策略。 你可以在启动过程中改写(override)它,来切换到 HashLocationStrategy 风格。

延伸 -- 关于前端路由

页面地址中的 # 叫 hash,可以通过hashchange事件监听hash后面的地址内容发生变化。这个是Html5才有的API。也是各个前端路由类库的基础。 见例子

关于不刷新页面实现浏览器历史的前进后退,也是利用H5的History API this.route.push('login') 和 this.route.replace('login') 实际上是调用的是History.pushState()History.replaceState()

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.04.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 延伸 -- 关于前端路由
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档