1. 程式人生 > 實用技巧 >Angular6中開啟新的視窗

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">   <buttonpButtontype="button"class="ui-button-roundedsps-button-edituseButton"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 = "輸入的資料";