如何使用Angular2路由

我想寫一個單頁面的應用程序，但我無法讓路由工作。我嘗試了很多教程，但他們似乎很快就過時了，因爲Angular2仍處於測試階段。如何使用Angular2路由

看來，只要我任何引用添加到路由器的指令或路由器配置或路由器供應商，應用程序停止工作並打印出瀏覽器的控制檯上看到以下錯誤：現在我有

Error: Zone</ZoneDelegate</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20 
    Zone</Zone</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:227:25 
    scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:576:53 
    Zone</ZoneDelegate</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24 
    Zone</Zone</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29 
    [email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26 
    ZoneTask/[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:434:22 

    Evaluating http://localhost:3000/angular2/router 
    Error loading http://localhost:3000/app/main.js

下面的文件，這些文件不工作：

index.html

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Rapid</title> 

    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 

    <link href="css/dashboard.css" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <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/es6/dev/src/testing/shims_for_IE.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="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <app>Loading...</app> 
    </body> 
</html>

main.ts

import {MainApp} from './mainApp.component'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {bootstrap} from 'angular2/platform/browser'; 

bootstrap(MainApp, [ 
    ROUTER_PROVIDERS 
]);

mainApp.component.ts

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router'; 
import {Home} from './home.component' 

@Component({ 
    selector: 'app', 
    template: `  
    <div>Done</div> 

    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

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

export class MainApp {}

home.component.ts

import {Component} from 'angular2/core';  

@Component({ 
    template: '<div>Home</div>', 
}) 

export class Home {}

對不起，如果這是一個新手的問題，但因爲昨天我已經粘貼了，我不知道如何解決它...

來源

2016-04-06 napstablook

我有點缺少你的'index.html'中的'router.dev.js'。這可能是問題嗎？ :) – PierreDuc

確保router.dev.js（含）& app/main.js在正確的位置。

你在這裏錯過了幾件事。

不要放棄href="/"標記您的頁面上添加base像<base href="/">
應用組件模板將有<router-outlet></router-outlet>指令
然後使用useAsDefault: true爲你指定的路線

在路線

做如下改變

@RouteConfig([ 
    { path: '/', component: Home, as: 'Home', useAsDefault: true } 
    ])

來源

2016-04-06 18:12:52

嘿Pankaj！你的意思是''而不是''我認爲... –

Oh..my bad..mixed Angular 1.5（ng-outlet）with Angular 2 ..大聲笑..感謝您的領導.. Angular 2個老闆.. –

您現在面臨的錯誤的問題是因爲您的index.html中缺少router.dev.js。但正如@PankajParkar已經建議，你需要添加更多的東西到你的代碼，讓它真的工作:)

來源

2016-04-06 18:14:46 PierreDuc

如何使用Angular2路由

回答

相關問題