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

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

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

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

@Input() animal;

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

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

Будем очень признательны за любую помощь.

есть два способа передать значение, path variables и query params проверяют этот ответ: stackoverflow.com/a/48125257/4294381

Saad Mehmood 31.10.2018 12:43
2
1
6 320
2

Ответы 2

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

Ваш путь маршрутизации:

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

animal-details.component.ts

constructor(private route : ActivatedRoute) {} 

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

Да, но таким образом я получаю идентификатор, а не весь объект

Person 31.10.2018 13:57

если вы хотите отправить объект целиком, вы можете использовать EventEmitter или Subject или BehaviorSubject с помощью service. Вы также можете использовать SessionStorage или localStorage для связи между компонентами.

Sarthak Aggarwal 31.10.2018 14:00

Хм, я нашел это решение stackoverflow.com/a/39569933/5206428, которое работает, но перестает работать, если я обновляю маршрут на /animal/:id

Person 31.10.2018 14:18

SessionStorage и LocalStorage не будут иметь такой проблемы.

Sarthak Aggarwal 31.10.2018 14:22

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

 {
    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"];

Другие вопросы по теме