美文网首页
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+点击新窗口打开

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