无法绑定到 'routerlink'，因为它不是使用 angular2-webpack-starter 的已知原生属性

Question

我在使用 Angular2 Router 时遇到问题，无法解决。

这是我的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.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

但是当我打开浏览器时，出现这样的异常：

Can't bind to 'routerlink' since it isn't a known native property in Breadcrumb > ol:nth-child(0) > li:nth-child(1) > a:nth-child(1)[[routerlink]=['Home']]

我做了什么：

我在网上查了下，上面写着指令：[ROUTER_DIRECTIVES]不见了，但是我在app.ts、home.ts、[=42=这两个地方都添加了这行代码], 没用，有什么建议吗？

我正在使用 angular2-webpack-starter

Answer 1

尝试添加这些

指令：主要组件中的[RouterOutlet、RouterLink、ROUTER_DIRECTIVES]
指令：子组件中的 [RouterOutlet, RouterLink]

无法绑定到 'routerlink'，因为它不是使用 angular2-webpack-starter 的已知原生属性

Can't bind to 'routerlink' since it isn't a known native property using angular2-webpack-starter

javascript

angular

routing

angular2-routing

无法绑定到 'routerlink'，因为它不是使用 angular2-webpack-starter 的已知原生 属性

Can't bind to 'routerlink' since it isn't a known native property using angular2-webpack-starter

javascript

angular

routing

angular2-routing

无法绑定到 'routerlink'，因为它不是使用 angular2-webpack-starter 的已知原生属性