在数据更改之前，Angular2 Observable 不会呈现

Question

我是 Angular2 的新手，所以希望我有一个简单的问题可以解决 :)

我正在尝试使用可观察服务在多个视图（独立的路由）之间共享数据（对象列表，通过服务本地存储在内存中）。问题是，当我更改路线（即通过 link）时，共享数据不会呈现，直到我 "add" 将新项目添加到列表（即在当前路线中）。我已经看到很多类似的堆栈溢出问题，但 none 的解决方案非常有效。

我不知道错误是在我的路由、我的 ngInit 函数（即在数据完成之前渲染？）还是在我自己定义 service/component 的方式中。下面是一些代码片段来说明：

路由：

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[]>;

那样的话，如果可观察对象在您的组件绑定之前获得一个值，它将仍然获得最后一个值。

在数据更改之前，Angular2 Observable 不会呈现

Angular2 Observable not rendering until data changed

angular

angular2-routing

angular2-services