首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用navigationExtras动态发送数组数据?

使用navigationExtras动态发送数组数据的方法如下:

  1. 首先,导入Angular的Router模块和ActivatedRoute模块:
代码语言:txt
复制
import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
  1. 在组件的构造函数中注入Router和ActivatedRoute:
代码语言:txt
复制
constructor(private router: Router, private route: ActivatedRoute) { }
  1. 创建一个数组数据,并将其存储在一个变量中:
代码语言:txt
复制
const myArray = [1, 2, 3, 4, 5];
  1. 创建一个NavigationExtras对象,并将数组数据作为参数传递给它的state属性:
代码语言:txt
复制
const navigationExtras: NavigationExtras = {
  state: {
    data: myArray
  }
};
  1. 使用Router的navigate方法导航到目标组件,并将NavigationExtras对象作为第二个参数传递给navigate方法:
代码语言:txt
复制
this.router.navigate(['target-component'], navigationExtras);
  1. 在目标组件中,使用ActivatedRoute的snapshot属性来获取传递过来的数组数据:
代码语言:txt
复制
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  const data = this.route.snapshot.state.data;
  console.log(data); // 输出 [1, 2, 3, 4, 5]
}

这样就可以使用navigationExtras动态发送数组数据了。在源组件中,通过创建NavigationExtras对象并将数组数据传递给它的state属性,然后在目标组件中使用ActivatedRoute的snapshot属性获取传递过来的数组数据。这种方法适用于Angular的路由导航。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券