Angular 2 Beta路由错误：模板解析错误：无法绑定到“ router-link”，因为它不是已知的本机属性

Question

I just started learning angular 2 and I am trying to set up a router. 我刚刚开始学习角度2，并尝试设置路由器。 I checked out other blogs about this and nothing has worked so far. 我查看了其他有关此内容的博客，到目前为止没有任何成果。 I have a basic setup with an apps Component that would be shown when the user clicks the links at the top of the page. 我有一个带有apps组件的基本设置，当用户单击页面顶部的链接时将显示该组件。

Here is the code I have so far. 这是我到目前为止的代码。 I am sure that something is missing. 我确定有些东西丢失了。 Please let me know if so. 如果是这样，请告诉我。

index.html 的index.html

<html>

<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- 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: {
            app: {
                format: 'register',
                defaultExtension: 'js',
                baseURL: '/',
                transpiler: 'typescript',
            }
        }
    });
    System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->

<body>
<my-app>Loading...</my-app>
</body>

</html>

app.component.ts app.component.ts

import {Component}from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {apps} from './apps.component';
// Root level app
@Component({
selector: 'my-app',
directives: [ROUTER_DIRECTIVES],
template: `
    <ul>
        <li><a href="#">Home</a></li>
        <li><a [router-link]="['/apps']">Apps</a></li>
        <li><a href="#">GPS</a></li>
        <li><a href="#">Settings</a></li>
    </ul>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
`
 })

@RouteConfig([{
  path: '/apps',
  as: 'apps',
  component: apps
}])
export class AppComponent {}

apps.component.ts apps.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
 selector: 'apps-menu',
 template: '<h1>I am the apps</h1>'
})

export class apps{

}

main.ts main.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Answer 1

Do follow camelCase while using directives on view. 在视图上使用指令时，请遵循camelCase 。 Use kebab has been deprecate in angular late alpha version only. Use kebab仅在角度后期alpha版本中不推荐使用。

It should be routerLink instead of route-link 应该是routerLink而不是route-link

<li><a [routerLink]="['/apps']">Apps</a></li>

Answer 2

You should inject ROUTER_DIRECTIVES during the bootstrap process. 您应该在引导过程中注入ROUTER_DIRECTIVES 。

You need to set up your @RouteConfig a little differently. 您需要对@RouteConfig进行一些不同的设置。

@RouteConfig([ {
     path      : '/apps',
     name      : 'apps', // notice "name" here not "as"
     component : apps
} ])

Then when you are trying to call a Route you need to do: 然后，当您尝试呼叫路线时，您需要执行以下操作：

<a [routerLink]="['apps']">

Angular 2 Beta路由错误：模板解析错误：无法绑定到“ router-link”，因为它不是已知的本机属性

问题描述

2 个解决方案

解决方案1
1 2016-04-17 20:03:54

解决方案2
1 2016-04-17 21:43:50

Angular 2 Beta路由错误：模板解析错误：无法绑定到“ router-link”，因为它不是已知的本机属性

问题描述

2 个解决方案

解决方案1 1 2016-04-17 20:03:54

解决方案2 1 2016-04-17 21:43:50

解决方案1
1 2016-04-17 20:03:54

解决方案2
1 2016-04-17 21:43:50