美文网首页
Angular 允许ctrl+点击新窗口打开

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

作者: 飞凡的陀螺 | 来源:发表于2019-04-26 23:21 被阅读0次

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

  1. 修改 app-routing.module.ts 开启hash模式
@NgModule({
  imports: [
    // 加入  {useHash: true}
    RouterModule.forRoot(routes, {useHash: true})
  ],
  exports: [
    RouterModule
  ]
})
  1. 然后修改相关的module文件,比如ad页面的链接需要支持,组件所属于app-ad.module.ts
    则打开这个文件
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()

相关文章

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

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

  • Chrome使用技巧

    1. ctrl+点击:在新页面打开网页2. shift+点击:在新窗口打开网页3. ctrl+shift+i:打开...

  • 编程练习

    制作新按钮,“新窗口打开网站” ,点击打开新窗口。 任务 1、新窗口打开时弹出确认框,是否打开 提示:使用 if ...

  • 练习1-window打开网页

    编程练习制作新按钮,“新窗口打开网站” ,点击打开新窗口。 任务1、新窗口打开时弹出确认框,是否打开提示: 使用 ...

  • 点击打开新窗口

    点击打开新窗口var winInfo ="toolbar=no,menubar=no,status=yes,scr...

  • a标签

    新窗口打开 新窗口打开

  • Selenium+Python句柄操作

    当我们打开浏览器,点击页面链接时,经常会遇到新的页面会在新窗口打开,而Selenium不会去自动识别新窗口,所以我...

  • js打开点击打开新窗口

    任务 1、新窗口打开时弹出确认框,是否打开提示: 使用 if 判断确认框是否点击了确定,如点击弹出输入对话框,否则...

  • Chrome快捷键

    ctrl+点击链接 :在一个新标签页打开它 shift+点击链接 :在一个新的窗口打开它 ctrl+shift+...

  • window postMessage

    有个需求是,打开新窗口,新窗口点击按钮后,原窗口的列表要刷新,这个的话,只要能解决页面的通信问题,原窗口只要重新调...

网友评论

      本文标题:Angular 允许ctrl+点击新窗口打开

      本文链接:https://www.haomeiwen.com/subject/dkvcnqtx.html