Angular6中打開新的窗口

需求：

   Angular6的環境下，在一個頁面中有一個<a>標簽，點擊鏈接后，需要跳轉到新的頁面（注意新的頁面是在瀏覽器的新窗口中打開）。

方案：

   使用angular 的路由功能，使用 routerLink 屬性處理。

具體過程：

1、新建一個組件，作為跳轉界面的內容：

ng g c childpage

2、在新的childpage.component.html 模板文件中寫自己需要展現的內容。

3、開啟angular的路由功能，並在路由文件(app-routing.module.ts)中添加自己需要跳轉界面的路由

import {NgModule} from '@angular/core';

import {CommonModule} from '@angular/common';

import {Router, RouterModule, Routes} from '@angular/router';

import {LoginComponent} from '../manager/demo/ChildPage.component';

　　const routes: Routes = [

　　　　{path: 'childPage', component: ChildPageComponent},

　　];

@NgModule({

　　imports: [RouterModule.forRoot(routes)],

　　exports: [RouterModule]

})

export class AppRoutingModule {

　　constructor(public router: Router) {

　　}

}

 

 4、然后在當前的界面（即跳轉前的界面）中設置<a>標簽

<a routerLink="/childPage" target="_blank">跳轉到新頁面</a>

1.使用HTML:target="_blank"，在新的頁面中打開鏈接，形成父子界面的關系。

_blank -- 在新窗口中打開鏈接 
_parent -- 在父窗體中打開鏈接 
_self -- 在當前窗體打開鏈接,此為默認值 
_top -- 在當前窗體打開鏈接，並替換當前的整個窗體(框架頁)

 

<a [href]="checkRequestUrl+detail.payeeId" target="_blank">

　　<button pButton type="button" class="ui-button-rounded sps-button-edit useButton" label="USE" [disabled]="detail.isUse">

　　</button>

</a>

 

2.window.opener 的用法 
window.opener 返回的是創建當前窗口的那個窗口的引用，比如點擊了a.htm上的一個鏈接而打開了b.htm，
然后我們打算在b.htm上輸入一個值然后賦予a.htm上的一個id為“name”的textbox中，就可以寫為： 

window.opener.document.getElementById("name").value = "輸入的數據";