如何使用Angular2路由 [英] How to use Angular2 routing
问题描述
我正在尝试编写一个单页应用程序，但无法使路由正常工作.我尝试使用许多教程，但考虑到Angular2仍处于测试阶段，它们似乎很快过时了.
I'm trying to write a single-page app but I can't get the routing to work. I tried using many tutorials but they seem to become outdated very quickly, considering that Angular2 is still on beta.
似乎一旦我添加了对路由器指令或路由器配置或路由器提供程序的任何引用，该应用程序就会停止运行，并且在浏览器的控制台上会显示以下错误:
It seems that as soon as I add any reference to router directives or router configuration or router providers, the app stops working and the following error is printed on the browser's console:
Error: Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20
Zone</Zone</Zone.prototype.run@http://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</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29
drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26
ZoneTask/this.invoke@http://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
现在我有以下文件，这些文件不起作用:
Right now I have the following files, which don't work:
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 {}
很抱歉，如果这是一个新手问题，但是从昨天开始我一直坚持下去，我不知道该怎么解决...
I'm sorry if this is a newbie question, but I've been stuck on it since yesterday and I don't know how else to solve it...
推荐答案
确保router.dev.js(包括)& app/main.js在正确的位置.
Make sure router.dev.js(included) & app/main.js in correct location.
您在这里错过了几件事.
You missed few things here.
- 像
<base href="/">一样在页面上添加带有 - 应用组件模板将具有
<router-outlet></router-outlet>指令 - 然后将
useAsDefault: true用于您指定的路线
href="/"标记的base
- Do add
basewithhref="/"tag on your page like<base href="/"> - App component template will have
<router-outlet></router-outlet>directive - Then use
useAsDefault: truefor your specified route
请在下面更改路线
@RouteConfig([
{ path: '/', component: Home, as: 'Home', useAsDefault: true }
])
这篇关于如何使用Angular2路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
