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

【问题标题】：Angular 2 router not loading on refresh until I click button在我单击按钮之前，Angular 2 路由器不会在刷新时加载
【发布时间】：2016-07-25 23:50:18
【问题描述】：

我正在制作一个选项卡式仪表板，并且正在使用 Angular 2 路由器 v.3.0.0-beta.1，但最初加载应用程序时遇到问题。每当我加载页面时，我都必须单击一个选项卡才能使 /dashboards in 实际出现。起初我认为这与我在选项卡 1 中的路线链接（当前已注释掉）有关，但没有它仍然会发生。我正在尝试让选项卡 1 自动显示，然后让每个选项卡包含自己的路线。其他选项卡似乎在包含不同路线或打印功能方面都不起作用。任何帮助将不胜感激。
app.component.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");}


}

app.routes.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']); }

}

【问题讨论】：

我建议减少您在问题中包含的代码数量 - 如果人们能够立即看到麻烦的代码，他们更有可能发布答案。
您没有信心从帖子中删除任何一行代码吗？你已经发布了你当前的代码，这很好.. 但是有这么多的代码，而且没有简单的测试方法，你问很多人在这里浏览可能能够回答。
尝试修剪代码的另一个好处是，当删除一行代码突然使其再次工作时，您可能会在此过程中发现自己的“啊哈”时刻。
允许复制的 Plunker 会很有帮助。
您在这方面取得了进展吗？我遇到了完全相同的问题。

标签： javascript angularjs angular angular2-routing

【解决方案1】：

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

【讨论】：

【解决方案2】：

将此添加到您的路线中：

{
    path: '**',
    redirectTo: '/dashboard'
  },

【讨论】：