Как передавать данные на страницу с сротуингом?

Когда речь идет о передаче данных на страницу Angular с использованием роутинга, существует несколько способов реализации этого.

1. Query параметры: Вы можете передавать данные с использованием query параметров в URL. Для этого вам нужно будет обновить URL с нужными параметрами, а затем воспользоваться сервисом ActivatedRoute для получения этих параметров на целевой странице. Например, вы можете использовать такой код для передачи и получения данных используя query параметры:

На странице отправки данных:

   import { Router } from '@angular/router';

   constructor(private router: Router) {}

   sendData() {
     const data = { name: 'John', age: 25 };
     this.router.navigate(['/target-page'], { queryParams: data });
   }

На странице получения данных:

   import { ActivatedRoute } from '@angular/router';

   constructor(private route: ActivatedRoute) {}

   ngOnInit() {
     this.route.queryParams.subscribe(params => {
       const name = params['name'];
       const age = params['age'];
       // делаете что-то с полученными данными
     });
   }

2. Состояние маршрута: Второй способ - использование состояния маршрута. Вы можете передавать данные через объект состояния, который хранит дополнительную информацию о маршруте. Для этого вам понадобится настроить маршрут с использованием свойства data, а затем использовать сервис ActivatedRoute для получения этих данных на целевой странице. Например:

В определении маршрута:

   {
     path: 'target-page',
     component: TargetPageComponent,
     data: { name: 'John', age: 25 }
   }

На странице получения данных:

   import { ActivatedRoute } from '@angular/router';

   constructor(private route: ActivatedRoute) {}

   ngOnInit() {
     const name = this.route.snapshot.data['name'];
     const age = this.route.snapshot.data['age'];
     // делаете что-то с полученными данными
   }

3. Сервисы: Если вы хотите передавать данные между компонентами, которые связаны между собой через маршрутизацию, вы можете использовать сервисы. Создайте сервис с методами для передачи данных и инжектируйте его в компоненты, которым нужно передать или получить данные. Например:

   import { Injectable } from '@angular/core';

   @Injectable()
   export class DataService {
     private data: any;

     setData(data: any) {
       this.data = data;
     }

     getData() {
       return this.data;
     }
   }

В компоненте отправки данных:

   import { DataService } from './data.service';

   constructor(private dataService: DataService) {}

   sendData() {
     const data = { name: 'John', age: 25 };
     this.dataService.setData(data);
   }

В компоненте получения данных:

   import { DataService } from './data.service';

   constructor(private dataService: DataService) {}

   ngOnInit() {
     const data = this.dataService.getData();
     // делаете что-то с полученными данными
   }

На выбор способ зависит от ваших требований и особенностей проекта. Вы можете выбрать наиболее подходящий способ для передачи данных на страницу с использованием роутинга в Angular в зависимости от конкретной ситуации.