Angular 如何将不同的数据（对象数组）路由到角度方向上的相同组件

我的

仪表板.ts中有两个不同的“Clients[]”数组。
如何将此数据传递到“ClientsListComponent”中

dashboard.html

<a routerLink="dashboard/my-clients" >My Clients</a>
<a routerLink="dashboard/all-clients">All Clients</a>

ClientsListComponent.ts

@Component({
  selector: 'clients-list',
  templateUrl: './clients-list.component.html',
  styleUrls: ['./clients-list.component.css']
})
export class ClientsListComponent implements OnInit {

  @Input() clients: Client[] = []; // I print this data on screen.
  @Input() title: '';
  constructor() { }

  ngOnInit() {
  }
}


使用queryParams可以传递数据

发送

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

接收

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
  let value_1 = params['key'];
  let value_N = params['keyN'];

}))
 有几种方法可以做到这一点。可以使用
export
关键字导出
dashboard.ts中保存数组的变量。然后，另一个组件可以使用
import
语句访问该数组

另一种方法是使用在创建组件时传递的构造函数参数，使用组件定义中的
@Input（）
装饰器，就像您当前使用的那样

在父组件的模板中，可以使用以下语法传递构造函数参数：

<myapp-clientslist 
    [arg1]="arg1" [arg2]="arg2">
</myapp-clientslist>



双引号中的字符串计算为JavaScript。当然，这要求父组件可以使用这些变量，或者通过URL参数、导入语句等，以相同的方式被另一个父组件接收

<myapp-clientslist 
    [arg1]="arg1" [arg2]="arg2">
</myapp-clientslist>