Угловой 2: обмен данными по различным маршрутам

Question

Я искал аналогичные вопросы в SO, и я не нашел адреса, который касается моего конкретного случая. Существует много методов обмена данными между угловыми компонентами, и я прочитал эту статью о связи компонентов: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Однако ни одна из описанных здесь методик не работает, потому что мои компоненты находятся на разных маршрутах. В статье описывается связь между родительским и дочерним компонентами, и некоторые случаи могут работать для компонентов-близнецов, если они одновременно загружаются.

Мой случай очень похож на урок Angular 2 Heroes: у меня есть маршрут, который отображает таблицу со списком клиентов (вместо героев). Когда пользователь нажимает на конкретного клиента, я запускаю изменение маршрута, чтобы отобразить форму с данными для выбранного клиента (вместо героя).

Учебник heroes выполняет вызов службы для извлечения выбранных данных героя, но я хочу избежать бесполезного дополнительного вызова AJAX, учитывая, что эти данные уже находятся в памяти. Я просто хочу передать выбранные данные клиента компоненту формы клиента, чтобы он сразу отображался.

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

Answer 1

использование услуг, предоставляемое файл главного приложения, а затем вводить его каждый раз, когда вы хотите получить/установить данные, которые будут доступны в целом приложение

main.app.ts

@Component({ 
... 
    providers:[yourDataService] 
... 
}) 

другие компоненты

import {yourDataService} from '...'; 

@Component({ 
... 
providers:[]// we must use provider from main file 
... 
}) 
export class someComponent{ 

    contructor(private myData:yourDataService){} 

} 

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

вы также можете использовать observables, чтобы получить уведомление, когда некоторые данные изменены

для получения дополнительной информации взглянуть на hierarchical injections или tree injector

Answer 2

Что вы думаете о NgRx решение вдохновлено Redux? Вы можете прочитать больше там - https://github.com/ngrx/store

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

Answer 3

Я не уверен, что это то, что вам нужно, но если вам нужно обмениваться данными по всем маршрутам, вы можете попробовать это.

Создать модуль импорта и Объявить службу в модуле

import { MyService } from './my.service’; 

@NgModule({ 
    ... 
    providers: [ 
    MyService 
    ] 
    … 
}) 

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

В компонентах ребенка маршрут, импортировать службу

import { MyService } from '../my.service’; 

В каждом компоненте, где следует использовать службы, не добавить службу к метаданным компонентов, потому что мы Я уже добавил его к определению модуля. Добавьте службу к компоненту конструктора

export class MyChildRouteComponent implements OnInit { 
... 
constructor(
    private _myService: MyService, 
    private _router: Router 
) { } 
... 
} 

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