问题：

Angular2异常：无法绑定到“router link”，因为它不是已知的本机属性

鲁成天

2023-03-14

很明显Angular2的beta版本比new版本更新，所以没有太多的信息，但我想做的是一些基本的路由。

使用https://angular.io网站中的快速启动代码和其他片段进行黑客攻击，导致以下文件结构：

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

文件填充如下：

index.html

<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

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

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

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

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 { }

路由-test.component.ts

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 { }

尝试运行此代码会产生错误：

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

我在这里发现了一个隐约相关的问题；在升级到Angular2.0.0-beta.0后，路由器链接指令中断。然而，其中一个答案中的“工作示例”是基于pre-beta代码的--这很可能仍然可以工作，但我想知道为什么我创建的代码不能工作。

如有任何指示，我们将不胜感激！

共有3个答案

欧阳嘉年

2023-03-14

使用Visual Studio进行编码时的注意事项（2013年）

我已经浪费了4到5个小时尝试调试这个错误。我尝试了在StackOverflow上找到的所有解决方案，但仍然得到以下错误:不能绑定到'routerlink'，因为它不是已知的本机属性

请注意，Visual Studio有一个讨厌的习惯，即在复制/粘贴代码时自动设置文本格式。我总是得到一个小的瞬间调整从VS13（骆驼情况消失）。

这个：

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

变成：

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

这是一个很小的差异，但足以触发错误。最丑陋的部分是，这个小小的差异只是在每次我复制粘贴的时候不停地避开我的注意力。纯属偶然，我看到了这个小小的差别并解决了它。

章哲彦

2023-03-14

对于试图通过NPM测试或NG测试使用Karma或其他任何工具运行测试时发现此问题的人。您的.spec模块需要一个特殊的路由器测试导入才能构建。

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
});

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/

司空镜

2023-03-14

>=RC.5

导入routermodule请参阅https://angular.io/guide/router

@NgModule({ 
  imports: [RouterModule],
  ...
})

>=rc.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

Main.TS

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

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<=RC.1

您的代码丢失

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

如果不让组件知道routerlink或router-output之类的指令，就不能使用它们。

虽然在Angular2中，指令名称被更改为区分大小写的，但元素仍然在名称中使用-，如以与Web组件规范兼容，后者需要在自定义元素的名称中使用-。

全局注册

若要使router_directives全局可用，请将此提供程序添加到引导程序(...):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

那么就不再需要向每个组件添加router_directives。

类似资料：

无法绑定到“routerLink”，因为它不是已知的本机属性[duplicate]

是的，这可能是第一百次有人遇到这个问题，但没有解决办法对我有效。。。我使用角2.0.0 rc和什么都不会工作，我想我错过了一些东西，但我不知道是什么这是我的文件，它们都可以正确传输，是的，我尝试使用不推荐的路由，是的，我根据文档做了，两者都不起作用。 app.component.ts 主要的ts 指数html 其余的文件几乎都是教程中的复制粘贴，所以我不会用更多的代码来垃圾邮件。。。更新，我
无法绑定到“for”，因为它不是已知的本机属性 angular2

我必须动态地创建一个复选框列表无法绑定到“for”，因为它不是已知的本机属性 angular2 新错误消息未处理的promise拒绝：模板分析错误：无法绑定到“for”，因为它不是“label”的已知属性。这是我的plnkr显示错误:http://plnkr.co/edit/aAQfWvHc7h7IBuYzpItO?p=preview 我的代码中哪里出错了？
无法绑定到“routerlink”，因为它不是使用angular2-webpack-starter的已知本机属性[重复]

我有问题使用Angular2路由器，我不能解决它。我还在breadcrumb.ts导入ROUTER_DIRECTIVES 但是当我打开浏览器时，异常如下所示：无法绑定到'routerlink'，因为它不是Breadcrumb>ol:nth-child(0)>li:nth-child(1)>a:nth-child(1)[[routerlink]=['home']]中的已知本机属性
无法绑定到“routerLink”，因为它不是“a”[duplicate]的已知属性

我更新我们的应用程序从rc4到angular2.0.0之一，我得到一个模板解析错误在运行时。这是我的视图模板：错误在routerlink上。以下是错误：路由器链接在我看来并不畸形...我到底做错了什么？
异常：无法绑定到“ng for”，因为它不是已知的本机属性

我做错了什么？错误是
Angular2无法绑定到指令，因为它不是元素的已知属性

我生成了新的@Directive角CLI, 并且我尝试在我的组件中使用(ChatWindowComponent) 即使within指令只是Angular CLI生成的代码: 我得到了错误: zone.js：388 未处理的promise拒绝：模板解析错误：无法绑定到“appContenteditableModel”，因为它不是“p”的已知属性。我尝试了几乎所有可能的变化,t 有帮助吗？

Angular2异常：无法绑定到“router link”，因为它不是已知的本机属性

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档