Question

我正尝试将数据按角度传递到另一个页面，但是我希望这样做不会在URL中公开数据。

这是我要传输的数据集

[
  {
    "deliveryAddress": "a.a@a.com",
    "accountNumber": "1234",
    "deliveryChannel": "EMAIL",
    "renderSucceeded": true,
    "renderError": null
  },
  {
    "deliveryAddress": "b.b@b.com",
    "accountNumber": "5678",
    "deliveryChannel": "EMAIL",
    "renderSucceeded": true,
    "renderError": null
  }
]

这是我的路由阵列。我想导航到page2。

const routes: Routes = [
  { path: '', redirectTo: 'page1', pathMatch: 'full' },
  { path: 'page1', component:  AppComponent},
  { path: 'page2', component: page2Component }
];

Answer 1

您可以将此数据存储在任何服务中，并且可以使用该服务获取该数据。 address.service.ts

import
{
    Injectable
}
from '@angular/core';
@Injectable(
{
    providedIn: "root"
})
export class AddressService
{
    addresses: any;
    constructor()
    {}
    doAnyThing()
    {
        //do something
    }
}

page1.component.ts

export class Page1Component
{
    constructor(private addressesService: AddressesService)
    {}
    onUserClick()
    {
        this.addressesService.addresses = this.addresses;
    }
}

page2.component.ts

export class Page2Component
{
    constructor(private addressesService: AddressesService)
    {}
    ngOnInit()
    {
        this.addresses = this.addressesService.addresses;
    }
}

Answer 2

离子|导航参数：

第一页

constructor(private navCtrl: NavController) {}

onClick() {
  let yourArray = ["hellow from the other side"]
  this.navCtrl.push(SecondPage, yourArray)
}

第二页

constructor(private navParams: NavParams) {
  console.log(this.navParams.data)
}

网络|路由参数

当前Angular没有提供使用router.navigate传递附加数据的方法。
在相关问题中描述了很多用例，这些用例被不公正地关闭而没有实现。

还有一种解决方法。
安装

npm install angular2-navigate-with-data -save

在您的应用模块中将其初始化。

import "angular2-navigate-with-data";

现在，第一页

constructor (
        private router: Router
    ){}

    public redirect()
    {
        this.router.navigateByData({
            url: ["/PageTwo"],
            data: [1,2,3,4,5], //data - <any> type
            //extras: {} - <NavigationExtras> type, optional parameter
        });
    }

第二页

constructor (
        private router: Router
    ){}

    public ngOnInit()
    {
        console.log(this.router.getNavigatedData()); //output [1,2,3,4,5]
    }

我希望这行得通。谢谢

Answer 3

您可以使用打字稿和JavaScript来做到这一点。单击按钮时，您会在.ts

中编写一个方法

示例：

constructor(private router: Router){}
onClick(){
   let navigationParameters = [YOUR ARRAY];
   this.router.navigate(['/THE PAGE YOU WANT TO NAVIGATE'],navigationParameters);
}

用户单击按钮后将数组按角度传递到下一页

3 个答案: