首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular2异常:无法绑定到“”routerLink“”,因为它不是已知的本机属性

Angular2异常:无法绑定到“”routerLink“”,因为它不是已知的本机属性
EN

Stack Overflow用户
提问于 2015-12-17 00:21:19
回答 12查看 212.3K关注 0票数 284

显然,Angular2的测试版是新的而不是新的,所以没有太多的信息,但我正在尝试做一些我认为是相当基本的路由。

https://angular.io网站上的快速入门代码和其他代码片段进行修改后,得到了以下文件结构:

代码语言:javascript
复制
angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

其中的文件填充如下:

index.html

代码语言:javascript
复制
<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <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'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

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

</html>

boot.ts

代码语言:javascript
复制
import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

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

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

代码语言:javascript
复制
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

export class AppComponent { }

routing-test.component.ts

代码语言:javascript
复制
import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

尝试运行此代码会产生以下错误:

代码语言:javascript
复制
EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): AppComponent@2:11

我在这里发现了一个模糊相关的问题:router-link directives broken after upgrading to angular2.0.0-beta.0。然而,其中一个答案中的“工作示例”是基于预测试版代码的--这可能仍然可以工作,但我想知道为什么我创建的代码不能工作。

如果您有任何建议,我们将非常感谢!

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34317044

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档