Angular 2 Observables and Detection - Как получить один компонент для получения значения, установленного другим компонентом в службе?

0

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

Итак, у меня есть одна служба и два компонента.

В моей versionService.ts меня есть вспомогательный метод, который позволяет компонентам устанавливать currentVersion в _dataStore.

private _dataStore: {
    currentVersion: any
};
currVersionStream$: Subject<Version>;

constructor(public http: Http) {
    this.currVersionStream$ = new BehaviorSubject<Version>(null);
    this._dataStore = {
        currentVersion: null
    };
}
public setCurrentVersion(v: Version): void {
    if (v != null) {
        this._dataStore.currentVersion = v;            
        this.currVersionStream$.next(this._dataStore.currentVersion);
    }
}

Затем в моем элементе select-version.component.ts через событие (щелчок) из представления/шаблона я использую метод-помощник setCurrentVersion из VersionService.ts для хранения кликов по версии.

В select.version.template.html:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li *ngFor="#v of availableVersions" (click)="selectedVersion(v)">
        <a href="#">
            Version {{v.versionID}}
        </a>
    </li>
    <li><a href="#">No version</a></li>
</ul>

В version.component.ts: Здесь я вызываю метод в службе. Обновление: я добавляю versionService в оба моих компонента.

    import {VersionService} from '../../services/services';

@Component({
        selector: 'select-version',
        templateUrl: 'app/component/selectVersion/select-version.template.html',
        providers: [VersionService]
    })

export class SelectVersionComponent implements OnInit {

    constructor(public versionService: VersionService) {}

    public selectedVersion(v: Version) {
        console.log("SVC - set this version: " + v.versionID);
        this.versionService.setCurrentVersion(v);
    }

Таким образом, в моем втором компоненте я хочу получить значение, установленное/сохраненное в службе (_dataStore), и отобразить его в своем представлении/шаблоне (моего второго компонента)

В моем файле second-component.template.html:

<h2>{{selectedVersion}}</h2>

В моем second-component.ts: Обновление:

    import {VersionService} from '../../services/services';

@Component({
    selector: 'main-container',
    templateUrl: 'app/component/mainContainer/main-container.template.html',
    providers: [VersionService],
})

selectedVersion: any;

constructor(public versionService: VersionService) {
    this.versionService.currVersionStream$.subscribe((v) => {
        if(v != null) {
            this.selectedVersion = "Version" + v.versionID
        }
    }, error => console.error (error));
}

Обновление: в моем основном компоненте app.component.ts:

import {SidebarComponent} from './component/sidebar/sidebar.component';
import {MainContainerComponent} from './component/mainContainer/main-container.component';


@Component({
    selector: 'init-app',
    templateUrl: 'app/app-component.template.html',
    directives: [SidebarComponent, MainContainerComponent],
})

export class AppComponent {
    constructor() {}
}

В моем boot.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http'

bootstrap(AppComponent, [HTTP_PROVIDERS])
     .catch(err => console.error(err));

Что мне не хватает, чтобы иметь возможность просматривать currentVersion в моем шаблоне второго компонента и будет ли он обновляться каждый раз, когда будет установлено новое значение? Спасибо за любой ответ!

  • 1
    Если вы внедряете сервис в каждый компонент, каждый из них получит свой экземпляр. Если эти компоненты являются одноуровневыми, обязательно добавьте Службу в родительский компонент, один раз.
  • 1
    Как упоминал Эрик, все должно работать так, как вы ожидаете. Можете ли вы показать, как вы регистрируете сервис с компонентом? Вы передаете его через свойство providers (то есть, провайдеров: [VersionService]), или вы настраиваете его при загрузке (т. Е. При загрузке (AppComponent, [VersionService]))? Вы должны делать только последнее (не оба).
Показать ещё 3 комментария
Теги:
angular
subscribe
observable
reactive-programming

1 ответ

0

В дополнение к тому, что сказал Eric и pixelbits, вы не используете один и тот же экземпляр службы. Один экземпляр создается для каждого компонента, так как вы используете атрибут providers на этом уровне.

Если вы хотите узнать больше об иерархической инъекции, вы можете посмотреть на этот ответ:

Надеюсь, это поможет вам, Тьерри

Ещё вопросы

Сообщество Overcoder
Наверх
Меню