你好,这是必应。我可以帮你什么吗?😊
我看到你想使用angular语言用window.open打开新窗口,传递参数不显示在地址栏中。这是一个比较复杂的问题,因为通常情况下,window.open函数会把参数作为URL的一部分传递,这样就会暴露在地址栏中。我为你找了一些网上的解决方案,希望对你有用。
- 一种方法是使用NavigationExtras的state属性来传递参数,这样就不会出现在URL中。你可以在调用window.open函数时,把你想传递的对象作为state的值传入,然后在目标组件中,通过router.getCurrentNavigation().extras.state来获取参数²⁴。例如:
// 在源组件中
let params = {name: "erika", age: 20}; // 你想传递的参数对象
window.open("/user", "_blank", "", {state: params}); // 打开新窗口并传递参数
// 在目标组件中
let params = this.router.getCurrentNavigation().extras.state; // 获取参数对象
console.log(params.name, params.age); // 输出 "erika" 20
- 另一种方法是使用service来共享数据,在源组件中把参数保存到一个service中,在目标组件中从service中获取参数¹⁵。这种方法需要你自己创建一个service,并在两个组件中都注入它。例如:
// 创建一个service
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private data: any; // 用来存储数据的变量
constructor() { }
setData(data: any) { // 设置数据的方法
this.data = data;
}
getData() { // 获取数据的方法
return this.data;
}
}
// 在源组件中
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-source',
template: '<button (click)="openWindow()">Open Window</button>'
})
export class SourceComponent {
constructor(private dataService: DataService) {} // 注入service
openWindow() {
let params = {name: "erika", age: 20}; // 你想传递的参数对象
this.dataService.setData(params); // 把参数保存到service中
window.open("/user", "_blank"); // 打开新窗口
}
}
// 在目标组件中
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-user',
template: '<p>{{name}} {{age}}</p>'
})
export class UserComponent implements OnInit {
name: string;
age: number;
constructor(private dataService: DataService) {} // 注入service
ngOnInit() {
let params = this.dataService.getData(); // 从service中获取参数对象
this.name = params.name;
this.age = params.age;
console.log(this.name, this.age); // 输出 "erika" 20
}
}
希望这些方案能帮助你实现你想要的功能。如果你还有其他问题,欢迎继续咨询我。祝你编程愉快!
Source: Conversation with Bing, 2023/7/27
(1) How pass parameters from two url without show them in the url. https://stackoverflow.com/questions/62039584/how-pass-parameters-from-two-url-without-show-them-in-the-url.
(2) Pass invisible or hidden parameters using routerLink Angular. https://stackoverflow.com/questions/46905336/pass-invisible-or-hidden-parameters-using-routerlink-angular.
(3) Pass parameters to an Angular page without appearing in the URL. https://stackoverflow.com/questions/58295162/pass-parameters-to-an-angular-page-without-appearing-in-the-url.
(4) Angular 10|9|8 Get URL or Set URL Parameters using Router and … https://www.freakyjolly.com/angular-access-parameters-in-url-using-activatedroute/.
(5) JavaScript Window open method - javatpoint. https://www.javatpoint.com/javascript-window-open-method.