मुझे 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>
यह मेरा ऐप है।
/*
* 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 आयात करता हूं
मेरे घर के अंदर। मेरे पास एक breadcrum.ts है, जिसमें एचटीएमएल कोड है:
<li class="active">
<a [routerLink]="["Home"]">NAME YOUR APP</a>
</li>
<li>
<a [routerLink]="["PickVideo"]">PICK YOUR VIDEOS</a>
</li>
मैं breadcrumb.ts पर ROUTER_DIRECTIVES आयात भी करता हूं
लेकिन जब मैं ब्राउज़र खोलता हूं, तो इस तरह का अपवाद दिया जाता है:
"राउटरलिंक" से बंधे नहीं जा सकते हैं क्योंकि यह एक ज्ञात मूल संपत्ति नहीं है Breadcrumb> ol: nth-child (0)> li: nth-child (1)> एक: n वें वाले बच्चे (1) [[routerlink] = [ "घर"]]
मैंने क्या किया:
मैंने ऑनलाइन जांच की है, यह निर्देश है: [ROUTER_DIRECTIVES] गुम है, लेकिन मैंने कोड की इस पंक्ति को app.ts, home.ts, breadcrumb.ts पर जोड़ा है, यह काम नहीं कर रहा है, कोई सलाह है?
मैं इसका उपयोग कर रहा हूँ angular2-webpack स्टार्टर
उत्तर:
जवाब के लिए 3 № 1इन्हें जोड़ने का प्रयास करें
निर्देश: मुख्य घटक में [राउटरऑलेट, राउटरलिंक, ROUTER_DIRECTIVES]
निर्देश: बाल घटकों में [राउटरऑलेट, राउटरलिंक]