Как я могу передать разные данные (массив объектов) путем маршрутизации к тем же компонентам в угловых

Question

У меня есть два разных массива "Клиенты []" внутри моего dashboard.ts.Как я могу передать эти данные в «ClientsListComponent».

dashboard.html

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

app.module.ts

RouterModule.forRoot(
      [ { path: '', component: LoginComponent},
        { path: 'dashboard', canActivate: [AuthguardGuard], component: DashboardComponent},
        { path: 'dashboard/add-new-client', component: ClientFormComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/all-clients', component: ClientsListComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/my-clients', component: ClientsListComponent, canActivate: [AuthguardGuard]}
      ]

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() {
  }
}

Answer 1

Есть несколько способов сделать это.Переменная, содержащая массив в вашем dashboard.ts, может быть экспортирована с использованием ключевого слова export.Затем другой компонент может получить доступ к массиву с помощью оператора import.

Другой способ - использовать аргументы конструктора, которые передаются при создании компонента, используя декоратор @Input() в определении компонента прив настоящее время есть.

В шаблоне родительского компонента вы можете передавать аргументы конструктора, используя следующий синтаксис:

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

Строка в двойных кавычках оценивается как JavaScript.Это, конечно, требует, чтобы переменные были доступны для родительского компонента, либо от того, что они были получены другим родительским компонентом таким же образом, через параметры URL, операторы импорта и т. Д.

Answer 2

Используя 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'];

});