應用程序沒有正確更改路線。我如何獲得routeConfig爲我的應用程序工作？

我的角2打字稿應用程序組件路線似乎沒有工作。應用程序沒有正確更改路線。我如何獲得routeConfig爲我的應用程序工作？

當我改變登錄地址欄它不拉入HTML。它不給出一個控制檯錯誤或者

這裏是我的代碼從我的應用程序組件：

import { Component } from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; 

import {Login} from './components/login/login'; 
import {Home} from './components/home/home'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <ul> 
     <li>test</li> 
     </ul> 
    ` 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/', component: Home, as: 'Home'}, 
    { path: '/home', component: Home, as: 'Home'}, 
    { path: '/login', component: Login, as: 'Login' } 
]) 

export class AppComponent {}

指數

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <!-- build:vendor -->  
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <!-- endbuild --> 

    <!-- build:app --> 
    <script src="config.js"></script> 
    <!-- endbuild --> 
    </head> 

    <body> 
    <div class="header"> 
     <div class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#/">Angular2</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="row"> 
     <my-app>Loading...</my-app> 
     </div> 
    </div> 
    </body> 

</html>

這是我的引導文件

import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 

import {AppComponent} from './app.component'; 

import {AuthService} from './services/authService/authService'; 
import {SocialService} from './services/socialService/socialService'; 
import {UserService} from './services/userService/userService'; 
import {OrganisationService} from './services/organisationService/organisationService'; 
import {NotificationService} from './services/notificationService/notificationService'; 
import {ApplicationService} from './services/applicationService/applicationService'; 
import {JobService} from './services/jobService/jobService'; 
import {MessageService} from './services/messageService/messageService'; 
import {EmailService} from './services/emailService/emailService'; 

import {Login} from './components/login/login'; 
import {Home} from './components/home/home'; 

import {Environment} from './models/environment/environment'; 
import {UserProfile} from './models/profile/profile'; 
import {Organisation} from './models/organisation/organisation'; 
import {User} from './models/user/user'; 

bootstrap(AppComponent, [ 
HTTP_PROVIDERS, 
AuthService, 
ApplicationService, 
EmailService, 
SocialService, 
UserService, 
JobService, 
MessageService, 
EmailService, 
OrganisationService, 
NotificationService, 
Environment, 
Organisation, 
Profile, 
User, 
Home, 
Login 
]);

這是我的配置文件：

System.config({ 
    packages: {  
    app: { 
     format: 'register', 
     defaultExtension: 'js' 
    } 
    } 
}); 
System.import('app/boot') 
     .then(null, console.error.bind(console));

來源

2016-05-29 AngularM

很難說這麼少的信息。您可以將'useAsDefault：true'添加到其中一條路線。 –

你有任何錯誤消息或控制檯中的東西？ – micronyks

控制檯沒有錯誤。似乎只使用應用程序組件配置中的模板 – AngularM

的組件需要有一個<router-outlet></router-outlet>讓路由器能夠添加在路由定義的組件：

@Component({ 
    selector: 'my-app', 
    template: ` 
     <ul> 
     <li>test</li> 
     </ul> 
     <router-outlet></router-outlet> 
    ` 
    directives: [ROUTER_DIRECTIVES] 
})

ROUTER_PROVIDERS失蹤以及

bootstrap(AppComponent, [ 
HTTP_PROVIDERS, 
ROUTER_PROVIDERS, 
...

來源

2016-05-29 13:49:28

乾杯的工作 – AngularM

應用程序沒有正確更改路線。我如何獲得routeConfig爲我的應用程序工作？

回答

相關問題