无法绑定到“routerlink”，因为它不是使用 angular2-webpack-starter 的已知本机属性 [重复]
Posted
技术标签:
【中文标题】无法绑定到“routerlink”，因为它不是使用 angular2-webpack-starter 的已知本机属性 [重复]【英文标题】：Can't bind to 'routerlink' since it isn't a known native property using angular2-webpack-starter [duplicate] 【发布时间】：2016-04-11 02:17:26 【问题描述】：我在使用 Angular2 路由器时遇到问题，无法解决。
这是我的 index.html
<html lang="">
<head>
<title>Angular2 Webpack Starter by @gdi2990 from @AngularClass</title>
...
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- base url -->
<base href="/">
<!--
Angular 2
ES6 browser shim
-->
<script src="/lib/es6-shim.js"></script>
</head>
<body>
<app>
Loading...
</app>
......
</body>
</html>
这是我的 app.ts：
/*
* Angular 2 decorators and services
*/
import Directive, Component, View, ElementRef from 'angular2/angular2';
import RouteConfig, Router from 'angular2/router';
import Http, Headers from 'angular2/http';
/*
* Angular Directives
*/
import CORE_DIRECTIVES, FORM_DIRECTIVES from 'angular2/angular2';
import ROUTER_DIRECTIVES from 'angular2/router';
import RouterLink from 'angular2/router';
import Home from '../components/home/home';
import Banner from '../components/banner/banner';
import PickVideo from '../components/pickvideo/pickvideo'
/*
* App Component
* Top Level Component
*/
@Component(
selector: 'app',
directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink, Home, Banner ],
...
template: `
<div class="container">
<header>
<banner></banner>
</header>
<main>
<router-outlet></router-outlet>
</main>
</div>
`
)
@RouteConfig([
path: '/', redirectTo: 'home',
path: '/home', as: 'Home', component: Home ,
path: '/pick-video', as: 'PickVideo', component: PickVideo
])
当页面加载时，它会重定向到 Home，我在 home.ts 中导入 ROUTER_DIRECTIVES
在我的 home.ts 中，我有一个 breadcrum.ts，它的 html 代码如下：
<li class="active">
<a [routerLink]="['Home']">NAME YOUR APP</a>
</li>
<li>
<a [routerLink]="['PickVideo']">PICK YOUR VIDEOS</a>
</li>
我还在 breadcrumb.ts 中导入 ROUTER_DIRECTIVES
但是当我打开浏览器时，给出的异常如下：
无法绑定到“routerlink”，因为它不是已知的本地属性 面包屑 > ol:nth-child(0) > li:nth-child(1) > a:nth-child(1)[[routerlink]=['Home']]
我做了什么：
我在网上查了一下，它说指令：[ROUTER_DIRECTIVES] 丢失，但我在 app.ts、home.ts、breadcrumb.ts 都添加了这行代码，它不起作用，有什么建议吗？
我正在使用angular2-webpack-starter
【问题讨论】：
看起来你的 webpack 配置中的某些东西正在小写你的 HTML 我在使用html-minifier 时遇到了同样的问题。添加选项caseSensitive: true 解决了这个问题。
【参考方案1】：
尝试添加这些
指令：主组件中的 [RouterOutlet, RouterLink, ROUTER_DIRECTIVES] 指令：子组件中的[RouterOutlet，RouterLink]
【讨论】：
这些应该从哪里导入？ 从 'angular2/router' 导入 RouteConfig, ROUTER_DIRECTIVES;以上是关于无法绑定到“routerlink”，因为它不是使用 angular2-webpack-starter 的已知本机属性 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
无法绑定到“routerLink”，因为它不是已知的本机属性[重复]
模板解析错误：无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]
无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]
无法绑定到“routerlink”，因为它不是使用 angular2-webpack-starter 的已知本机属性 [重复]