Offensichtlich ist die Beta für Angular2 neuer als neu, daher gibt es nicht viele Informationen, aber ich versuche, das zu tun, was ich für ein ziemlich einfaches Routing halte.
Das Hacken mit dem Schnellstartcode und anderen Ausschnitten von der https: //angular.io-Website hat zu der folgenden Dateistruktur geführt:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
Die Dateien werden wie folgt gefüllt:
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 { }
routing-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 { }
Der Versuch, diesen Code auszuführen, führt zu folgendem Fehler:
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
Ich habe hier ein vage verwandtes Problem gefunden; Router-Link-Anweisungen sind nach dem Upgrade auf angle2.0.0-beta.0 fehlerhaft . Das "Arbeitsbeispiel" in einer der Antworten basiert jedoch auf Pre-Beta-Code - der möglicherweise noch funktioniert, aber ich würde gerne wissen, warum der von mir erstellte Code nicht funktioniert.
Alle Hinweise wären dankbar!
directives: [ROUTER_DIRECTIVES]
.@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
directives: [ROUTER_DIRECTIVES]
und Wechseln von [Router-Link] zu [Router-Link] wird der Fehler nicht mehr angezeigt.Antworten:
> = RC.5
Importieren Sie das
RouterModule
Siehe auch https://angular.io/guide/router> = RC.2
app.routes.ts
main.ts
<= RC.1
Ihr Code fehlt
Sie können keine Direktiven wie
routerLink
oder verwendenrouter-outlet
ohne sie Ihrer Komponente bekannt zu machen.Während Direktivennamen in Angular2 so geändert wurden, dass zwischen Groß- und Kleinschreibung unterschieden wird, werden Elemente
-
im Namen weiterhin verwendet<router-outlet>
, um mit der Webkomponentenspezifikation kompatibel zu sein, für die ein-
Name im Namen benutzerdefinierter Elemente erforderlich ist .Registrieren Sie sich global
ROUTER_DIRECTIVES
Fügen Sie diesen Anbieter hinzu, um ihn global verfügbar zu machenbootstrap(...)
:Dann ist es nicht mehr erforderlich
ROUTER_DIRECTIVES
, jeder Komponente etwas hinzuzufügen .quelle
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, ETC...], multi: true})
FORM_DIRECTIVES
ist enthaltenPLATFORM_DIRECTIVES
bereits standardmäßig aktiviert .Für Personen, die dies finden, wenn sie versuchen, Tests auszuführen, weil über
npm test
oderng test
mit Karma oder was auch immer. Ihr .spec-Modul benötigt einen speziellen Router-Testimport, um erstellt werden zu können.http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/
quelle
spec
Datei, dass ich dies hinzufügen musste. Danke @raykrow!RouterModule
müssen Sie anrufenforRoot
, um das Modul zu erfüllen, und dann sollten Sie dieBASE_HREF
und ...Can't bind to 'active' since it isn't a known property of 'a'.
in mehreren meiner Komponententests und habe importiertRouterTestingModule
.Vorsicht beim Codieren mit Visual Studio (2013)
Ich habe 4 bis 5 Stunden damit verbracht, diesen Fehler zu beheben. Ich habe alle Lösungen, die ich auf StackOverflow gefunden habe, per Brief ausprobiert und trotzdem den folgenden Fehler erhalten:
Can't bind to 'routerlink' since it isn't a known native property
Beachten Sie, dass Visual Studio beim Kopieren / Einfügen von Code die unangenehme Angewohnheit hat, Text automatisch zu formatieren. Ich habe immer eine kleine sofortige Anpassung von VS13 erhalten (Kamelkoffer verschwindet).
Dies:
Wird:
Es ist ein kleiner Unterschied, aber genug, um den Fehler auszulösen. Das Hässlichste ist, dass dieser kleine Unterschied jedes Mal, wenn ich kopierte und einfügte, meine Aufmerksamkeit vermeidete. Durch Zufall habe ich diesen kleinen Unterschied gesehen und gelöst.
quelle
Für> = V5
Komponente:
Für <V5
Kann auch
RouterLink
alsdirectives
dh verwendet werden.directives: [RouterLink]
. das hat bei mir funktioniertquelle
Wenn Sie einen Fehler wie erhalten
Can't bind to 'xxx' since it isn't a known native property
, besteht die wahrscheinlichste Ursache darin, dass Sie vergessen, eine Komponente oder eine Direktive (oder eine Konstante, die die Komponente oder die Direktive enthält) imdirectives
Metadatenarray anzugeben . Dies ist hier der Fall.Da Sie nicht angegeben haben
RouterLink
oder die KonstanteROUTER_DIRECTIVES
- die Folgendes enthält :- im
directives
Array, dann, wenn Angular analysiertes weiß nicht , über den Router Direktive (benutzt Attribut Selektor
routerLink
). Da Angular weiß, was dasa
Element ist, wird davon ausgegangen, dass[routerLink]="..."
es sich um eine Eigenschaftsbindung für dasa
Element handelt. Dann stellt es jedoch fest, dassrouterLink
es sich nicht um eine native Eigenschaft vona
Elementen handelt, und löst daher die Ausnahme für die unbekannte Eigenschaft aus.Ich habe die Mehrdeutigkeit der Syntax nie wirklich gemocht . Dh überlegen
Wenn wir uns nur den HTML-Code ansehen, können wir nicht sagen, ob dies der Fall
whatIsThis
istsomething
something
Wir müssen wissen, welche
directives: [...]
in den Metadaten der Komponente / Direktive angegeben sind, um den HTML-Code mental zu interpretieren. Und wenn wir vergessen, etwas in dasdirectives
Array aufzunehmen, macht es diese Mehrdeutigkeit meiner Meinung nach etwas schwieriger, Fehler zu beheben.quelle
Sie haben in Ihrem Modul
Sie müssen das Modul RouteModule exportieren
Beispiel:
um auf die Funktionen für alle zugreifen zu können, die dieses Modul importieren.
quelle
Ich habe alle oben genannten Methoden ausprobiert. Aber keine Methode funktioniert für mich. Schließlich habe ich eine Lösung für das oben genannte Problem und sie funktioniert für mich.
Ich habe diese Methode ausprobiert:
In HTML:
In der TS-Datei:
quelle
In meinem Fall habe ich das RouterModule im App-Modul importiert, aber nicht in mein Funktionsmodul importiert. Nach dem Import des Routermoduls in mein EventModule verschwindet der Fehler.
quelle
Wenn dieser Fehler beim Testen des Geräts auftritt, schreiben Sie dies bitte.
quelle
Ich schätze die Antwort von @ raykrow sehr, wenn man dieses Problem nur in einer Testdatei hat! Dort bin ich darauf gestoßen.
Da es oft hilfreich ist, eine andere Möglichkeit zu haben, etwas als Backup zu erstellen, wollte ich diese Technik erwähnen, die auch funktioniert (anstatt zu importieren
RouterTestingModule
):(Normalerweise wird
routerLink
ein<a>
Element verwendet, der Selektor wird jedoch für andere Komponenten entsprechend angepasst.)Der zweite Grund, warum ich diese alternative Lösung erwähnen wollte, ist, dass ich, obwohl sie mir in einer Reihe von Spezifikationsdateien gute Dienste geleistet hat, in einem Fall auf ein Problem damit gestoßen bin:
Ich konnte nicht
ButtonComponent
genau herausfinden, wie dieser Mock und ich denselben Selektor verwendeten. Die Suche nach einem alternativen Ansatz führte mich hier zu @ raykrows Lösung.quelle
Wenn Sie gemeinsam genutzte Module verwenden, fügen Sie RouterModule einfach einem Modul hinzu, in dem Ihre Komponente deklariert ist, und vergessen Sie nicht, das Modul hinzuzufügen
<router-outlet></router-outlet>
Von hier aus referenziert RouterLink funktioniert nicht
quelle
Meine Lösung ist einfach. Ich verwende [href] anstelle von [routerLink]. Ich habe alle Lösungen für [routerLink] ausprobiert. Keiner von ihnen funktioniert in meinem Fall.
Hier ist meine Lösung:
Schreiben Sie dann die
getPlanUrl
Funktion in die TS-Datei.quelle