У меня проблема с маршрутизатором Angular2 и асинхронным каналом.
Я пытаюсь отобразить наблюдаемый RxJs, и данные не отображаются автоматически.
Необходимо щелкнуть ссылку маршрута для отображения данных.
Вот корневое приложение:
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';
bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);
Вот корневой компонент:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";
@Component({
selector: 'my-app',
providers: [AppService, FirstComponent, SecondComponent],
directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
template: `<h1>An Angular 2 App</h1>
<a [routerLink]="['First']">first-default</a>
<a [routerLink]="['Second']">second</a>
<router-outlet></router-outlet>`
})
@RouteConfig([
{path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
{path: '/second', name: 'Second', component: SecondComponent}
])
export class AppComponent {
}
Вот первый компонент:
import {Component} from "angular2/core";
import {AppService} from "./app.services.ts";
import "rxjs/Rx";
@Component({
selector: 'my-first',
template: `
<div>
<ul>
<li *ngFor="#s of appService.someObservable$ | async">
a string: {{ s }}
</li>
</ul>
</div>`
})
export class FirstComponent {
constructor(private appService:AppService) {
console.log('constructor', 'first');
}
}
и, наконец, сервис (где находятся данные):
import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Rx";
@Injectable()
export class AppService {
constructor() {
console.log('constructor', 'appService');
this.constructSomeObservable();
}
someObservable$:Observable <string[]>;
constructSomeObservable() {
this.someObservable$ = Observable.create(observer => {
const eventSource = new EventSource('/interval-sse-observable');
eventSource.onmessage = x => observer.next(JSON.parse(x.data));
eventSource.onerror = x => observer.error(console.log('EventSource failed'));
return () => {
eventSource.close();
};
})
.startWith([])
.scan((acc, value) => acc.concat(value));
}
}
Что у меня не так с роутером или трубой?
См. Образец проекта на github здесь.
изменить: вот измененная версия компонента:
import {Component} from "angular2/core";
import {AppService} from "./app.services.ts";
import {Observable} from "rxjs/Rx";
@Component({
selector: 'my-first',
template: `
<div>
<ul>
<li *ngFor="#s of someObservable$ | async">
a string: {{ s }}
</li>
</ul>
</div>`
})
export class FirstComponent {
someObservable$:Observable <string[]>;
constructor(private appService:AppService) {
console.log('constructor', 'first');
this.someObservable$ = appService.someObservable$;
}
}
Данные в шаблоне не обновляются. Это связано с двусторонней / односторонней привязкой?