我是 Angular 2 的新手，在实现一个非常简单的应用程序时遇到了困难:一个具有 1 个组件的基本路由器。
我已阅读入门/教程并观看 Egghead.io 上的类(class)。
首先，这是我的代码:
// src/app.ts
import { bootstrap } from 'angular2/platform/browser';
import { ROUTER_PROVIDERS } from "angular2/router";
import { AppComponent } from "./components/index";
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
// src/components/app.component.ts
import { Component } from "angular2/core";
import { RouteConfig, ROUTER_DIRECTIVES } from "angular2/router";
import { HomeComponent, NavComponent } from "./index";
@Component({
selector: 'app-view',
directives: [ ROUTER_DIRECTIVES, NavComponent ],
template: `
<h1>App</h1>
<nav-cmp></nav-cmp>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent }
])
export class AppComponent { }
// src/components/nav.component.ts
import { Component } from "angular2/core";
@Component({
selector: 'nav-cmp',
template: `
<nav>
<a [routerLink]="['Home']">Home</a>
</nav>
`
})
export class NavComponent { }
// src/components/home.component.ts
import { Component } from "angular2/core";
@Component({
template: `<h2>Home.</h2>`
})
export class HomeComponent { }
// src/components/index.ts
export { AppComponent } from "./app.component";
export { NavComponent } from "./nav.component";
export { HomeComponent } from "./home.component";
和index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<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="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
build: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('build/app')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
错误信息是: 组件“AppComponent” View 上出现意外的指令值“未定义”
我真的不明白我改变了什么，但一小时前，它是*路由配置应该包含一个“组件”，“加载器”或“redirectTo”属性。**
我真的不明白我做错了什么。
编辑:添加package.json和tsconfig.json。
包.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc -p .",
"tsc:w": "tsc -w -p .",
"wp:w": "webpack --watch",
"lite": "nano-server",
"http": "http-server -p 3000 -a 127.0.0.1 -o",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@ngrx/store": "^1.3.3",
"angular2": "2.0.0-beta.9",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.24",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"css-loader": "^0.23.1",
"http-server": "^0.9.0",
"lite-server": "^2.1.0",
"node-sass": "^3.4.2",
"path": "^0.12.7",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"typescript": "^1.8.7",
"typings": "^0.7.5",
"webpack": "^1.12.14"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./build",
"sourceRoot": "./src/",
"rootDir": "./src/"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
编辑2:项目结构:
project/
├── build/
│ └── all my .js & .map
├── docs/
│ └── some usefull .md files :)
├── node_modules/
├── src/
│ ├── components/
│ │ ├── app.component.ts
│ │ ├── home.component.ts
│ │ ├── nav.component.ts
│ │ └── index.ts
│ ├── public/
│ ├── app.ts
│ └── config.ts
├── typings/
├── index.html
├── package.json
├── tsconfig.json
└── webpack.config.json
最佳答案
您的代码存在一些问题。
告诉 SystemJS 查看您的 outDir 文件夹。
例如，在我的 tsconfig.json 中，我设置了 outDir: dist。然后我必须执行以下操作:
System.config({
map: { app: 'dist'},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
告诉 SystemJS 导入您的 bootstrap 文件。
例如，如果我有一个名为 boot.ts 的文件，那么我必须这样做:
System.import('app/boot')
.then(null, console.error.bind(console));
在你的情况下，你应该这样做 System.import('app/app').then(null, console.error.bind(console));
在 nav.component 中导入 ROUTER_DIRECTIVE
由于您使用的是来自 ROUTER_DIRECTIVE 的 routerLink，因此您需要导入它。
在你的 nav.component.ts 中 从 'angular2/router' 导入 {ROUTER_DIRECTIVES};
从组件自己的文件导入组件，而不是从 index.ts
//import { HomeComponent, NavComponent } from "./index";
import { HomeComponent} from "./home.component";
import { NavComponent} from "./nav.component";
你拥有的原因
Unexpected directive value 'undefined' on the View of component 'AppComponent'
是因为您从其他文件导入了组件。我不知道你为什么要这样做。但这就是导致这个问题的原因。替换为上面的代码。
关于javascript - Angular 2 : Error with directives and routes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36034264/