Angular2 Наблюдаемые не оказывающее, пока данные не будет изменены

Question

Я новичок в Angular2, так что надеюсь, у меня есть простая проблема решить :)

Я пытаюсь разделить данные (список объектов, локально сохраненные в памяти по службе) через несколько видов (это отдельные маршруты) с помощью наблюдаемой службы. Проблема заключается в том, что когда я меняю маршрут (т. Е. Через ссылку), общие данные не отображаются, пока я не «добавлю» новый элемент в список (т. Е. На текущем маршруте). Я видел много аналогичных вопросов при переполнении стека, но ни одно из решений не сработало.

Я не знаю, была ли ошибка в моей маршрутизации, моя функция ngInit (т. Е. Рендеринг перед завершением данных?) Или в том, как я определил сам сервис/компонент. Вот некоторые фрагменты кода для иллюстрации:

Routing:

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/running-order', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'running-order', 
    component: RunningOrderComponent 
    }, 
    { 
    path: 'enquiry', 
    component: EnquiryComponent 
    }, 
    { 
    path: 'config', 
    component: ConfigComponent 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

Услуга:

@Injectable() 
export class ChaptersService{ 

    //Observable Source 
    private chaptersSource:Subject<BaseChapter[]>; 

    //Observable Stream 
    chapters$: Observable<BaseChapter[]>; 

    //DataStore 
    private dataStore:{ chapters: BaseChapter[] }; 

    constructor() { 
     console.log('chapter service instantiated'); 
     this.chaptersSource = new Subject<BaseChapter[]>(); 
     this.chapters$ = this.chaptersSource.asObservable(); 
     this.dataStore = { chapters: [] };  
    } 

    loadAll() { 
     this.chaptersSource.next(this.dataStore.chapters); 
    } 

    addChapter(data:BaseChapter){ 
     this.dataStore.chapters.push(data); 
     this.chaptersSource.next(this.dataStore.chapters); 
    } 
} 

компонент (маршрутизация):

@Component({ 
    selector: 'myenquiry', 
    templateUrl: 'enquiry.component.html', 
    styleUrls: ['enquiry.component.css'] 
}) 

export class EnquiryComponent implements OnInit{ 
    config : Config; 
    title = 'Enquiry Angular App'; 
    selectedChapter: BaseChapter; 

    chapters$: Observable<BaseChapter[]>; 

    constructor(private chaptersService:ChaptersService){} 

    ngOnInit():void { 
     this.chaptersService.loadAll(); 
     this.chapters$ = this.chaptersService.chapters$; 
     console.log('enquiry component initialised...'); 
    } 

    onSelect(chapter: BaseChapter): void { 
     this.selectedChapter = chapter; 
    } 

    addChapter():void { 
     var chapter:Chapter = new Chapter(0); 
     chapter.initChapter("untitled",4); 
     this.chaptersService.addChapter(chapter); 
     this.selectedChapter = chapter; 
    } 
} 

Компонент Шаблон:

<h2>List of Chapters</h2> 
<ul class="chapters"> 
    <li *ngFor="let chapter of chapters$ | async" [class.selected]="chapter === selectedChapter" (click)="onSelect(chapter)" > 
     <span class="idStyle">{{chapter.id}}</span> {{chapter.name}} 
    </li> 
</ul> 
<chapter [chapterData]="selectedChapter"></chapter> 
<button (click)="addChapter()">Add Chapter</button> 

спасибо, Фил.

Answer 1

Изменить

private chaptersSource:Subject<BaseChapter[]>; 

быть

private chaptersSource:ReplaySubject<BaseChapter[]>; 

таким образом, если наблюдаемая получает значение, прежде чем ваш компонент связала он получит последнее значение толкнул еще.