Я думаю, что я забываю что-то очень фундаментальное, и я уже несколько дней стуча головой. Я новичок в Угловом и реактивном программировании.
Итак, у меня есть одна служба и два компонента.
В моей 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
в моем шаблоне второго компонента и будет ли он обновляться каждый раз, когда будет установлено новое значение? Спасибо за любой ответ!
В дополнение к тому, что сказал Eric и pixelbits, вы не используете один и тот же экземпляр службы. Один экземпляр создается для каждого компонента, так как вы используете атрибут providers
на этом уровне.
Если вы хотите узнать больше об иерархической инъекции, вы можете посмотреть на этот ответ:
Надеюсь, это поможет вам, Тьерри
providers
(то есть, провайдеров: [VersionService]), или вы настраиваете его при загрузке (т. Е. При загрузке (AppComponent, [VersionService]))? Вы должны делать только последнее (не оба).