Question

我正在制作一个标签式仪表板，并且正在使用angular 2路由器v.3.0.0-beta.1，并且在开始加载应用时遇到问题。每当我加载页面时，我必须单击一个选项卡，以便实际显示/仪表板。起初我认为它与标签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']); }

}

Answer 1

您没有显示system-polyfills.js文件，但我怀疑您可能会将if(MY_FLAG) #**** exe files set(exefiles file1 file2 ) foreach(file ${exefiles}) add_executable(${file} ${CMAKE_CURRENT_SOURCE_DIR}/pathToExeFiles/${file}.cpp ) add_dependencies(${file} external_package_generate_messages_cpp ${${my_package}_EXPORTED_TARGETS}) endforeach(file) ....脚本包含在脑中。删除此文件为我解决了这个问题。

Answer 2

将此添加到您的路线：

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

Angular 2路由器在刷新之前没有加载，直到我点击按钮

2 个答案: