Angular2 -在路由和渲染组件之前，通过service获取数组

我试图在我的路由呈现我的组件之前获取数据。在app-component中，我从后端得到一个数组。这个数组通过ItemsServices传递给Statisticlist，或者，这就是我想要的。问题是，似乎在数组传递之前，statisclist组件呈现，所以当console.log项目来自itemsService时，它在statisclist中未定义，但在app组件中没有定义。在服务中设置了值后，我如何继续渲染组件?

我已经查找了解析器，但我只找到了数据在路由中传递的例子，大多数时候它是一个名为id的变量。我想通过一个服务传递我的数组，但在它被获取后加载组件。我不明白在我这种情况下该怎么用它。

在第一个建议之后编辑:因此，我通过使用解析器尽可能地遵循这篇文章。我没有得到错误，但是什么也没有显示。itemsArray在statisticlist-component中仍然没有定义。这就是我的代码现在的样子。

编辑2:我现在意识到，在statisticlist-component中，我正在尝试this.route.snapshot.params['items']，但项目不是路由的参数，就像在文章示例中一样。但我不知道如何让它做我想做的事。

编辑3:我已经意识到解析器需要一个可观察对象，这就是我现在正在尝试的。现在还是运气。无法在ItemsService上设置属性"items"的undefined。setItems (items.service.ts: 11)

//items
export class Items {
    constructor(public items: any[]){}
}
//itemsService 
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Items } from './items';
@Injectable()
export class ItemsService {
  public items: Items;
  setItems(items: any[]) {
    console.log(items);
    this.items.items = items;
  }
    getItems() {
    return Observable.create(observer => {
      setTimeout(() => {
        observer.next(this.items)
        observer.complete();
      }, 3000);
    });
  }
}
//items-resolve
import { Component } from '@angular/core';
import { Resolve } from '@angular/router';
import { Items } from './items';
import { ItemsService } from './items.service';
import { Injectable } from '@angular/core';
@Injectable()
export class ItemsResolve implements Resolve<Items>{
    constructor(private itemsService: ItemsService) { }
    resolve() {
        return this.itemsService.getItems();
    }
}
        <!-- app-component.html -->
                    <div class="btn-group btn-group-justified" role="group" aria-label="..." id="button-grp">
                        <div class="btn-group" role="group">
                            <a [routerLink]="['brott', region]"><button (click)='onClickCrimes(region)' type="button" class="btn btn-default">Brott</button></a>
                        </div>
                        <div class="btn-group" role="group">
                            <a [routerLink]="['statistik', region]"><button (click)='onClickStatistics(region)' type="button" class="btn btn-default">Statistik</button></a>
                        </div>
                    </div>
                    <router-outlet></router-outlet>
                </div>

        //app.routing.ts
    import { RouterModule, Routes } from '@angular/router';
    import { FeedlistComponent } from './feedlist/feedlist.component';
    import { StatisticlistComponent } from './statisticlist/statisticlist.component';
    import { ItemsResolve} from './items-resolve';
    const APP_ROUTES: Routes = [
        { path: 'brott/:region', component: FeedlistComponent },
        { path: 'statistik/:region', component: StatisticlistComponent, resolve: { items: ItemsResolve} },
        { path: '', component: FeedlistComponent }
    ];
    export const routing = RouterModule.forRoot(APP_ROUTES);
    //statisticlist.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { ItemsService } from '../items.service';
import { ActivatedRoute } from '@angular/router';
import { Items } from '../items';
@Component({
  selector: 'app-statisticlist',
  templateUrl: './statisticlist.component.html',
  styleUrls: ['./statisticlist.component.css']
})
export class StatisticlistComponent implements OnInit {
  itemsArray: any[];
  items: Items; 
  constructor(private itemsService: ItemsService, private route: ActivatedRoute) { }
  ngOnInit() {
    this.items = this.route.snapshot.params['items'];
    this.itemsArray = this.items.items;
    console.log(this.itemsArray);
  }
}
        <!-- statisticlist.component.html -->
<div class="margin-top">
    <div *ngIf="isDataAvailable">
        <ul class="list-group" *ngFor="let item of itemsArray">
            <!-- ngFor, lista alla län och deras brottsstatistik -->
            <li class="list-group-item list-group-item-info">
                <p>{{item?.region}}</p>
            </li>
            <li class="list-group-item">Invånare: {{item?.population}}</li>
            <li class="list-group-item">Brott per kapita (denna veckan): {{item?.crimePerCapita}}%</li>
        </ul>
    </div>
</div>
//app.module.ts (I excluded all of the imports to make the reading easier)
    @NgModule({
      declarations: [
        AppComponent,
        MapComponent,
        FeedlistComponent,
        FeedComponent,
        StatisticlistComponent,
        StatisticComponent,
        HeaderComponent,
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
      ],
      providers: [HttpService, ItemsService, ItemsResolve],
      bootstrap: [AppComponent],
    })
    export class AppModule { }

我在statisticlist-component中的ngOnInit看起来与本文中的ngOnInit不同。他需要使用他通过解析器获得的id获取联系人，但我只需要使用我通过解析器获得的数组。有什么建议吗?