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

Question

У меня есть 2 компонента, Профиль & Изображения (оба имеют разные маршруты). Я хочу получить доступ к одной переменной из профиля в компоненте Image.

У меня есть одна кнопка в Компонент BusinessList, когда пользователь нажимает на эту кнопку, он должен перенаправляться на домашнюю страницу, где я добавляю один элемент в localstorage.

В профиле домашней страницы, изображениях и контактах находятся на разных вкладках.

После нажатия кнопки в BusinessList активируется вкладка профиля. Здесь я получаю местный пункт хранения, хранение его одной переменной - ту же переменную я хочу получить к нему доступ из изображения, контакты --- ушки

Вот мой Профиль Компонентный

import { Component, OnInit} from '@angular/core'; 

@Component({ 
    moduleId: 'module.id', 
    selector: 'my-profile', 
    templateUrl: '../views/business.images.html', 
}) 


export class BusinessProfileComponent { 
    public userAction: any; 


    constructor(private router: Router, activeroute: ActivatedRoute, 
       BusinessSettingService: BusinessSettingService) { 


    this.userAction = localStorage.getItem("action") 
    BusinessSettingService.userTakenAction.next(this.userAction); 

    console.log(this.userAction, ' this.userAction') 
    } 

}

Здесь userAction является разделяемые данные между компонентами,

изображение компонент

import { Component, OnInit} from '@angular/core'; 

@Component({ 
    moduleId: 'module.id', 
    selector: 'my-core', 
    templateUrl: '../views/business.images.html', 
}) 

export class BusinessImagesComponent{ 

constructor(private router: Router, BusinessSettingService: BusinessSettingService) { 

    BusinessSettingService.userTakenAction.subscribe(value => {this.userImageaction= !value;}) 
} 

BusinessSettingService

import { Injectable,Output,EventEmitter }  from '@angular/core'; 

@Injectable() 
export class BusinessSettingService { 

    public userTakenAction: EventEmitter<string> = new EventEmitter<string>(); 
} 

Я создал пользовательский сервис для компонентов с помощью EventEmitter, это хороший подход к решению этого сценария, или есть лучший способ сделать это?

Я не смог получить значение userAction в компоненте Image .. Пожалуйста, помогите мне решить эту

Answer 1

Обновить ваш BusinessSettingService к следующему:

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

@Injectable() 
export class BusinessSettingService { 

// Observable for selection source 
    private userActionSource = new Subject<any>(); 

// Observable for selection stream 
    userActionStream$ = this.userActionSource.asObservable(); 

userActionUpdated(userAction: any) { 
    console.log('user action is: ' + userAction); 
    this.userActionSource.next(userAction); 
    } 

} 

Теперь, как в профиле и компонент изображения, инициируют ваш BusinessSettingService в конструкторе и просто подпишитесь на этого наблюдателя и обновите значение.

В компоненте конструктора:

constructor (private businessSettingService: BusinessSettingService) {} 

, а затем подписываются его и обновлять значение:

this.businessSettingService.userActionUpdated(this.userAction); 

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

this.businessSettingService.userActionStream$.subscribe(
    value => { 
     this.userAction = value; 
    } 
); 

Надеюсь, это поможет.