Question

是的，这可能是第一次有人遇到这个问题，但没有解决办法对我有用......

我正在使用角度2.0.0 rc并且没有任何工作，我想我错过了什么，但我不知道是什么

这是我的文件，它们都正确转换，是的，我尝试使用未弃用的路由，是的，我根据文档做了，都不起作用。

app.component.ts

import { Component, OnInit } from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES} from '@angular/router';


import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';

@Component({
    selector: 'my-app',
    template: `
     <h1>{{title}}</h1>
     <nav>
        <a [routerLink]="['/login']">login</a>
        <a [routerLink]="['/home']">home</a>
     </nav>
     <router-outlet></router-outlet>
  `, directives: [ROUTER_DIRECTIVES]
})
    @Routes([
        { path: '/login', component: LoginComponent},
        { path: '/home', component: HomeComponent},
])
export class AppComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['/home']);
    }

}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';


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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
</head>

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

其余文件几乎都是教程中的复制粘贴，因此我不会使用更多代码发送垃圾邮件......

更新，我将补充说由于某种原因，npm日志不会向@ angular / routes-deprecated / ...发送GET请求，但是他们会将其发送到其他模块。但它包含在package.json和systemjs.config.js

中

我想我知道问题是什么，但我不确定是什么导致了这个问题

如您所见，chrome资产中没有routes文件夹。因此有意义的是它不会知道它 - 但是项目文件中的node_modules是存在的，它在systemjs.config.js中指定，就像任何其他模块一样......

Answer 1

他们已弃用RC2路由器：http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html

我使用的是3.0.0-alpha.7版本。

基于他们的example我还制作了app.routes.ts文件：

import { provideRouter, RouterConfig } from '@angular/router';
import { FooComponent, BarComponent, BazComponent } from './components/bunchOComponents.ts'

export const routes: RouterConfig = [
  { path: 'foo', component: FooComponent },
  { path: 'bar', component: BarComponent },
  { path: 'baz', component: BazComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

然后我在main.ts文件中使用了它：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/appcomponent.ts';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

HTH

Answer 2

由于RC.0 angular将路由器更改为新的实现，这意味着许多在线可用的示例都是旧路由器。

如果您使用的是@RouteConfig，则它是旧路由器。这是@angular/router-deprecated

提供的那个

新路由器使用@Routes，可从@angular/router

获取

否则ROUTER_DIRECTIVES和ROUTER_PROVIDERS的导入是相同的。

版本之间重要的其他更改是。

新路由器不支持命名路由。

路线

在：

import {RouteConfig} from '@angular/router-deprecated';
@RouteConfig([
  {path: '/myroute/:id', component: MyRoute, name: 'MyRoute'}
])

后：

import {Routes} from '@angular/router';
@Routes([
  { path: '/myroute/:id`, component: MyRoute }
])

routerLink

routerLink指令也发生了变化，并没有将对象作为第二个参数来指定路径变量，例如id

在：

<a routerLink="['MyRoute', {id: 1}]">Link</a>

后：

<a routerLink="['/myroute', 1]">Link</a>

Answer 3

Angular需要属性名称周围的[...]来表明它是一个需要解析的绑定。值中的[...]仅用于使Angular将指定的值解析为数组。

<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>

这并不能解释您收到的错误消息，因为错误消息表明绑定到不存在的属性，而我的更正是让Angular实际执行绑定。

无法绑定到'routerLink'，因为它不是已知的本机属性

3 个答案:

路线

routerLink