客戶(hù)希望使用Ctrl+點(diǎn)擊鏈接在新窗口打開(kāi)新頁(yè)面妙痹。
經(jīng)過(guò)調(diào)查可以實(shí)現(xiàn)变泄,具體方式:
- 修改
app-routing.module.ts
開(kāi)啟hash模式
@NgModule({
imports: [
// 加入 {useHash: true}
RouterModule.forRoot(routes, {useHash: true})
],
exports: [
RouterModule
]
})
- 然后修改相關(guān)的module文件食拜,比如ad頁(yè)面的鏈接需要支持,組件所屬于app-ad.module.ts
則打開(kāi)這個(gè)文件
import { NgModule } from '@angular/core';
import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
......
@NgModule({
....
// 加入這個(gè)提供器眯杏,
providers: [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
]
})
export class AppAdModule { }
官方文檔 有說(shuō)明:
RouterModule.forRoot 函數(shù)把 LocationStrategy 設(shè)置成了 PathLocationStrategy匾乓,使其成為了默認(rèn)策略。 你可以在啟動(dòng)過(guò)程中改寫(xiě)(override)它鳄厌,來(lái)切換到 HashLocationStrategy 風(fēng)格荞胡。
延伸 -- 關(guān)于前端路由
頁(yè)面地址中的 # 叫 hash,可以通過(guò)hashchange事件監(jiān)聽(tīng)hash后面的地址內(nèi)容發(fā)生變化了嚎。這個(gè)是Html5才有的API泪漂。也是各個(gè)前端路由類(lèi)庫(kù)的基礎(chǔ)。
見(jiàn)例子
關(guān)于不刷新頁(yè)面實(shí)現(xiàn)瀏覽器歷史的前進(jìn)后退歪泳,也是利用H5的History API
this.route.push('login') 和 this.route.replace('login') 實(shí)際上是調(diào)用的是History.pushState()
和 History.replaceState()