如何将数组传输到路由参数？

Question

*我正在制作一个 angular 项目（版本 6+）。我想使用路由传递数组参数。 *

const routes: Routes = [

  {
    path: 'books',
    component: BookComponent
  }
  ,
  {
    path: 'books/:id',
    component: BookDetailComponent
  },

...

Answer 1

您可以使用两种方式，

方法一：

HTML

<a routerLinkActive="active" [routerLink]="['/home', userIDs.join()]">Home</a>

TS:

userIDs: Array<number> = [1, 3, 4];

主页组件打字稿：

export class HomeViewComponent implements OnInit {
  userIDs: Array<number> = [];

  constructor(private router: ActivatedRoute)   { }

  ngOnInit() {
    this.router.params.subscribe(params => {
      this.userIDs = params['ids'].split(',');
    });
  }    
}

路由器模块：

 path: 'home/:ids', component: HomeViewComponent }

方法二（使用queryParams）：

您不需要像我们在上面的方法中那样在路由器模块中添加任何东西。

HTML

<a routerLinkActive="active" [routerLink]="['/home']" [queryParams]="{ids: userIDs}">Home</a>

TS

userIDs: Array<number> = [1, 3, 4];

主页组件打字稿：

export class HomeViewComponent implements OnInit {
  userIDs: Array<number> = [];

  constructor(private router: ActivatedRoute)   { }

  ngOnInit() {
    this.router.queryParams.subscribe(p => {
        this.userIDs = p.ids;
    }); 
  }
}

Answer 2

在html 发送数据首先在这里您将导入激活的路线，如下所示。从'@angular/router'导入{ActivatedRoute};

也在建设中施工（私人_routes:ActivatedRoute）{}

In====== ngOnInit( this._route.params.subscribe(参数 => { this.id=参数['id']； )

如何将数组传输到路由参数？

How do I transfer the array to the routing parameter?

arrays

parameters

angular

angular5

angular6

方法一：

方法二（使用queryParams）：