,可以通过以下步骤实现:
以下是一个示例代码:
在原始组件中的HTML模板中:
<button (click)="openNewTab()">打开新选项卡</button>
在原始组件的TypeScript代码中:
openNewTab() {
const data = {
name: 'John',
age: 30,
email: 'john@example.com'
};
const url = `new-tab.html?data=${encodeURIComponent(JSON.stringify(data))}`;
window.open(url, '_blank');
}
在新选项卡的HTML模板中:
<div>
<h2>新选项卡</h2>
<p>姓名:{{ person.name }}</p>
<p>年龄:{{ person.age }}</p>
<p>邮箱:{{ person.email }}</p>
</div>
在新选项卡的TypeScript代码中:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-tab',
templateUrl: './new-tab.component.html',
styleUrls: ['./new-tab.component.css']
})
export class NewTabComponent implements OnInit {
person: any;
ngOnInit() {
const urlParams = new URLSearchParams(window.location.search);
const data = JSON.parse(decodeURIComponent(urlParams.get('data')));
this.person = data;
}
}
请注意,以上示例中的代码仅供参考,实际实现可能会根据具体需求和项目结构有所不同。另外,关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议您参考腾讯云的官方文档和产品页面来了解相关产品和服务。
领取专属 10元无门槛券
手把手带您无忧上云