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 = "输入的数据"; 

 
原文地址:https://www.cnblogs.com/HuairongChen/p/13931694.html