Как передать объект между компонентами при переключении между маршрутами Angular

Question

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

<div class="animal">
  <a routerLink="/animal/{{animal.id}}">
  <div>
    ...
  </div>
  </a>
</div>

Он получает animal объект из родительского компонента, который является просто списком дочерних элементов.

@Input() animal;

Когда я нажимаю на него, я перехожу к другому компоненту, где я хочу отобразить некоторые свойства из этого объекта animal, по которому щелкнули.

Я думал о создании службы, которая будет хранить этот объект, но проблема в том, что я не знаю, как получить только объект, по которому щелкнули, а не каждый объект из списка.

Вся помощь будет высоко ценится.

Answer 1

Попробуйте использовать распознаватель Route Resolver Service - где вы можете выполнить некоторые действия до загрузки маршрутизации

 {
    path: '',
    component: Component,
    resolve: { service: Service },
  },

export class Service implements Resolve<object | string> {

  constructor() {
    }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<object | string> | Promise<object | string>  {
        return {};
    }

В вашем onInit вы можете прочитать данные, внедрив службу ActivatedRoute в конструктор вашего компонента, как это

constructor(private _activatedRoute: ActivatedRoute) {
    }

Код в Onint - this.variable = this._activatedRoute.snapshot.data["service"];

Answer 2

Отправитель:

    router: Router;
    payload = {};      

    constructor(router: Router) {
    this.router = router;
    this.payload = {foo: 'foo', bar: 'bar'};
  }

  navigate(): void {
     this.router.navigate(['/routing/path'], {state: this.payload}));
  }

Получатель:

  constructor(router: Router) {
     console.log(router.getCurrentNavigation().extras.state);
   }

Новое представление будет печатать в консоли содержимое объекта полезной нагрузки.

Answer 3

Вы можете перехватить ваши параметры в маршрутизируемом компоненте, используя ActivatedRoute в angular

Ваш маршрут:

const routes : Routes = [
  { 
    // Other routes
  },
  {
     path:'animal/:id'
     component : AnimalDetailsComponent
  }
]

животное-details.component.ts

constructor(private route : ActivatedRoute) {} 

ngOnInit(){
  this.route.params.subscribe((params)=>{
     console.log(params['id'])
  })
}