需求:
Angular6的环境下,在一个页面中有一个<a>标签,点击链接后,需要跳转到新的页面(注意新的页面是在浏览器的新窗口中打开)。
方案:
使用angular 的路由功能,使用 routerLink 属性处理。
具体过程:
1、新建一个组件,作为跳转界面的内容:
ng g c childpage
2、在新的childpage.component.html 模板文件中写自己需要展现的内容。
3、开启angular的路由功能,并在路由文件(app-routing.module.ts)中添加自己需要跳转界面的路由
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 -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)
2.window.opener 的用法
window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,
然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:
window.opener.document.getElementById("name").value = "输入的数据";
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!