导航到路线时ngOnInit Not Firing

Question

我有几条路径指向一个加载数据并显示它的控制器。当我点击带有uiSref的链接导航到页面时，数据加载正常。但是，当我直接导航到该URL或通过“其他”规则时，ngOnInit永远不会触发，并且不会加载数据。我正在使用NG2。

我做错了什么？

由于

    ... truncated...
<nav>
    <a uiSref="venue-staff-list" uiSrefActive="active">list</a>
    <a uiSref="venue-edit-list" uiSrefActive="active">edit</a>
</nav>


 ... truncated ...
<ul *ngIf="isDataAvailable">
      <li *ngFor="let venue of venues">
        <span>{{venue.Name}}</span>
      </li>
    </ul>

    // module registration
    ... truncated ...
    import * as config from '../router.config';
    @NgModule({
      imports: [
        UIRouterModule.forRoot({
          config: config.uiRouterConfigFn,
          states: [
            { name: 'venue-staff-list', url: '/venue-staff-list', component: VenueStaffListComponent },
            { name: 'venue-edit-list', url: '/venue-edit-list', component: VenueStaffEditComponent },
          ],
          useHash: true
        })
      ]
    })

    // config
    import { UIRouter } from 'ui-router-ng2';
    import { UIRouterModule } from 'ui-router-ng2';
    import { Injector, Injectable } from '@angular/core';

    export function uiRouterConfigFn(router: UIRouter, injector: Injector) {
            router.urlService.rules.otherwise('vendor-staff-list');
    }


    // Component
    @Component({
      selector: 'app-venue-staff-list',
      templateUrl: './venue-staff-list.component.html',
      styleUrls: ['./venue-staff-list.component.css']
    })
    export class VenueStaffListComponent implements OnInit {
      venues: Venue[];
      isDataAvailable = false;
      constructor(private venueHttpService: VenueHttpService) { }

      private loadData() {
        this.venueHttpService.getVendorList().then(venues => {
          this.venues = venues;
          this.isDataAvailable = true; 
        });
      }


      ngOnInit() {
        this.loadData();
      }
     }