javascript - 在我单击按钮之前，Angular 2 路由器不会在刷新时加载

Question

我正在制作一个选项卡式仪表板并使用 angular 2 router v.3.0.0-beta.1 并且在最初加载应用程序时遇到问题。每当我加载页面时，我都必须单击一个选项卡才能实际显示/dashboards。起初我认为它与选项卡 1 中的路由链接(当前已注释掉)有关，但没有它仍然会发生。我试图让选项卡 1 自动显示，然后让每个选项卡包含自己的路线。其他选项卡在包含不同的路线或打印功能方面似乎不起作用。任何帮助将不胜感激。
应用程序组件.ts:

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [
    MD_SIDENAV_DIRECTIVES,
    MD_LIST_DIRECTIVES,
    MD_CARD_DIRECTIVES,
    MdToolbar,
    MdButton,
    MdInput,
    MdCheckbox,
    MdRadioGroup,
    MdRadioButton,
    MdIcon,
    MD_TABS_DIRECTIVES,
    DashboardsComponent,
    ROUTER_DIRECTIVES
  ],
  providers: [MdIconRegistry, MdRadioDispatcher, DashboardService],
  precompile: [DashboardsComponent]


})
export class AppComponent implements OnInit {

  dashboards: Dashboard[];
  selectedDashboard: Dashboard;
  constructor(private dashboardService: DashboardService,
              private router: Router) { console.log("outer constr");}
  ngOnInit() {
    console.log("outer init");

  }

  print() {console.log("TRYING");}


}

应用程序路由.ts

const routes: RouterConfig = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: DashboardsComponent
  }
];

export const appRouterProviders = [
  provideRouter(routes)
];

app.component.html

<md-sidenav-layout>
  <md-sidenav mode="push"#sidenav>
   <!-- <md-nav-list>
      <a md-list-item *ngFor="let view of views">
       <md-icon md-list-icon>{{view.icon}}</md-icon>
       <span md-line>{{view.name}}</span>
       <span md-line class="secondary">{{view.description}}</span>
      </a>
    </md-nav-list>-->
  </md-sidenav>
  <md-toolbar color="primary">

<!--button md-icon-button (click)="sidenav.open()"">
<md-icon>menu</md-icon>
</button-->
Braavos
</md-toolbar>
<md-tab-group>
  <md-tab>
    <template md-tab-label>One</template>
    <nav>
    <!--a routerLink="/dashboards" routerLinkActive="active">One</a-->
  </nav>
  </md-tab>
  <md-tab (click)="print()">
    <template md-tab-label>Two</template>
  </md-tab>
  <md-tab (click)="print()">
    <template md-tab-label>Three</template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Four</template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Five</template>
  </md-tab>
</md-tab-group>
</md-sidenav-layout>

<!--THIS IS WHERE ALL ROUTING APPEARS-->
<router-outlet></router-outlet>

dashboards.component.ts

@Component({
  selector: 'dashboards',
  moduleId: module.id,
  templateUrl: 'dashboards.component.html',
  styleUrls: ['./../app.component.css'],
  directives: [
    MD_LIST_DIRECTIVES,
    MD_CARD_DIRECTIVES,
    MdButton,
    MdInput,
    MdCheckbox,
    MdRadioGroup,
    MdRadioButton,
    MdIcon,
  ],
  providers: [MdIconRegistry, MdRadioDispatcher],

})
export class DashboardsComponent implements OnInit, OnDestroy {

  dashboards: Dashboard[];
  selectedDashboard: Dashboard;
  private sub: any;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: DashboardService) {
      this.service.getDashboards(1).then(dashboard => this.dashboards = dashboard);
  }
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let id = +params['id']; // (+) converts string 'id' to a number
     });
    console.log("init");
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
    onSelect(dashboard: Dashboard) { this.selectedDashboard = dashboard; console.log(this.selectedDashboard.name); }

  //gotoDashboards() { this.router.navigate(['/dashboards']); }

}

Answer 1

您没有显示您的 index.html 文件，但我怀疑您可能在脑海中包含了 system-polyfills.js 脚本。删除此文件为我解决了这个问题。