Angular6中打开新的窗口

2023-11-07 05:30•HTML/CSS•阅读 4318

需求：

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 -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

　　</button>

</a>

2.window.opener 的用法

window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，

然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：

window.opener.document.getElementById("name").value = "输入的数据";