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

Question

Контекст

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

Кодекс

@Injectable() 
    export class MyService { 

    private items: any; 

    constructor (private http: Http) { 
    this.items = []; 
    } 

    getItems() { 
    if(!this.items) { 
     return this.http.get(this.endpoint).map((data) => { 
     this.items = data; 
     return data; 
     }); 
    } else { 
     return Observable.of(this.items); 
    } 
    } 

    addItem (item) { 
    this.items.push(item); 
    } 

    saveItems() { 
    return this.http.put(endpoint, this.items); 
    } 
} 

Тогда Component1 может сделать:

userClickedAddItem (item) { 
    this.myService.addItem(item); 
} 

И Component2 могли бы сделать:

userClickedSave() { 
    this.myService.saveItems().subscribe((items) => { 
    // Do something 
    }); 
} 

Затем в модулях и составляющих частей, которые я делаю что-то подобные

@NgModule({ 
    providers: [MyService], 
    declarations: [ 
    Component1 
    Component2 
    ] 
}) 

Проблема

С Angular2 конкретизирует отдельные экземпляры услуг, даже если Component1 называется addItem, Component2 считает, никакие пункты не были добавлены, так как он имеет другой экземпляр MyService. Internet говорит, что способ справиться с этим заключается в том, чтобы сделать сервисы одиночными, объявив их на уровне приложения. Но я бы предпочел не делать этого, поскольку я использую модульный дизайн для своего приложения, который предназначен для ленивых модулей загрузки только по мере необходимости; таким образом, я бы предпочел сохранить услуги, организованные в соответствии с модулями и компонентами, которые должны будут их использовать.

Страница Angular2 на странице Hierarchical Dependency Injection объясняет, как решить противоположную проблему, когда вам нужны экземпляры служб, которые имеют разные кэшированные данные. Но это не объясняет, как выполнить то, что я хочу, чтобы эти данные сохранялись между различными компонентами, которые используют одну и ту же услугу. Объяснение, которое оно дает, также заставляет меня думать, что предоставления услуги на уровне модуля должно быть достаточно, но я все еще получаю отдельные экземпляры службы в двух моих компонентах.

Есть ли способ сохранить данные в службе, которая используется совместно между двумя компонентами, без привлечения поставщика услуг к модулю приложения?

Answer 1

Согласно документации Angular 2, вы можете достичь того, чего вы хотите достичь, между родительскими и дочерними компонентами.

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

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

Подробнее Parent and children communicate via a service