/ / Impossibile collegarsi a "routerlink" poiché non è una proprietà nativa conosciuta utilizzando angular2-webpack-starter [duplicato] - javascript, angolare, routing, angular2-routing

Impossibile eseguire il binding a "routerlink" poiché non è una proprietà nativa conosciuta utilizzando angular2-webpack-starter [duplicate] - javascript, angular, routing, angular2-routing

Ho problemi con Angular2 Router e non riesco a risolverlo.

Questo è il mio 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>

Questa è la mia 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}
])

Quando la pagina viene caricata, verrà reindirizzato a Home, quindi importerò ROUTER_DIRECTIVES su home.ts

Dentro il mio home.ts, ho un breadcrum.ts, che ha un codice html come questo:

  <li class="active">
<a [routerLink]="["Home"]">NAME YOUR APP</a>
</li>
<li>
<a [routerLink]="["PickVideo"]">PICK YOUR VIDEOS</a>
</li>

Importa anche ROUTER_DIRECTIVES a breadcrumb.ts

ma quando apro il browser, l'eccezione data in questo modo:

Impossibile "associare a" routerlink "poiché non è una proprietà nativa conosciuta in Breadcrumb> ol: nth-child (0)> li: nth-child (1)> un: nth-child (1) [[routerlink] = [ "Home"]]

Cosa ho fatto:

Ho controllato online, dice che mancano le direttive: [ROUTER_DIRECTIVES], ma ho aggiunto questa riga di codice su app.ts, home.ts, breadcrumb.ts, non funziona, qualche consiglio?

Sto usando il angular2-webpack-starter

risposte:

3 per risposta № 1

Prova ad aggiungerli

direttive: [RouterOutlet, RouterLink, ROUTER_DIRECTIVES] nel componente principale
direttive: [RouterOutlet, RouterLink] nei componenti figlio