राउटरलिंक काम नहीं करता है

Question

कोणीय 2 ऐप्स में मेरी रूटिंग अच्छी तरह से काम करती है। लेकिन मैं के आधार पर कुछ routeLink बनाने के लिए जा रहा हूँ इस :

यहाँ मेरा मार्ग है:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

और यहाँ लिंक है कि मैंने बनाया है:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

मुझे उम्मीद है कि, जब मैं उन पर क्लिक करता हूं तो यह सम्मानित घटक को नेविगेट करता है, लेकिन वे कुछ भी नहीं करते हैं?

Comments

क्या आप कोशिश कर सकते हैं [routerLink]='[/home']? क्या Angular2 संस्करण और राउटर संस्करण आप उपयोग कर रहे हैं?

— गुंटर ज़ोचबॉयर

यह काम नहीं करता है। आप अपने स्थान की जगह के साथ निश्चित हैं ?? मुझे लगता है कि मैं कोणीय 2 के अंतिम संस्करण का उपयोग कर रहा हूं, लेकिन मुझे नहीं पता कि इसे कैसे जांचना है। मैंने इसे नए एनजी के साथ उत्पन्न किया । और इसे अपडेट किया जाना चाहिए

— जेफ

क्षमा करें, होना चाहिए[routerLink]="['/home']"

— गुंटर Zöchbauer

हो सकता है कि आप directives: [ROUTER_DIRECTIVES],अपने घटक के मेटाडेटा में जोड़ना भूल गए हों । इसके बिना, कोणीय को पार्स करने का पता नहीं चलेगा routerLink।

— मार्क राजकॉक

Angular2 राउटर लिंक

— isherwood

Answer 1

आप जो कोड दिखा रहे हैं, वह बिल्कुल सही है।

मुझे संदेह है कि आपकी समस्या यह है कि आप RouterModule (जो कि RouterLink घोषित है) को मॉड्यूल में आयात नहीं कर रहे हैं जो इस टेम्पलेट का उपयोग करता है।

मुझे इसी तरह की समस्या थी और मुझे हल करने में कुछ समय लगा क्योंकि इस कदम का दस्तावेजीकरण में उल्लेख नहीं है।

इसलिए उस मॉड्यूल पर जाएं जो घटक को इस टेम्पलेट के साथ घोषित करता है और जोड़ें:

import { RouterModule } from '@angular/router';

फिर इसे अपने मॉड्यूल आयात में जोड़ें उदा

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

सही आयात विवरण होने के साथ, आपको उस राउटरलिंक को दिखाने के लिए भी जगह की आवश्यकता होगी, जो कि <router-outlet></router-outlet>तत्व में है, इसलिए इसे भी आपके HTML मार्कअप में कहीं रखा जाना चाहिए ताकि राउटर को पता हो कि उस डेटा को कहां प्रदर्शित करना है।

Comments

मैंने ऐसा सोचा और हाँ - आप मेरे मामले में भी बिलकुल सही हैं!

— धनंजय

मेरे आयात में राउटर मॉड्यूल को जोड़ने का काम किया, धन्यवाद!

— एनडेसा

मेरे लिये कार्य करता है। बहुत बहुत धन्यवाद!

— बूस्ती

Answer 2

अपने टेम्पलेट में इसे नीचे जोड़ने के लिए इसे न भूलें:

<router-outlet></router-outlet>

Answer 3

नीचे दिए गए लिंक को बदलने का प्रयास करें:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

इसके अलावा, index.html के हेडर में निम्नलिखित जोड़ें:

<base href="https://stackoverflow.com/">

Answer 4

इस तरह का उपयोग करें इस जानकारी के लिए इस विषय को पढ़ें

<a [routerLink]="['/about']">About this</a>

Comments

अपने लिंक के अनुसार, उनके routerLinkकाम करना चाहिए ;-)

— गुंटर Zöchbauer

इसके लिए काम करता है "@angular/router": "~3.4.0"। चीयर्स!

— mikym

हां, ब्रैकेट नोटेशन काम करता है (और विशिष्ट उद्देश्य के रूप में मान्य सिंटैक्स है), लेकिन यह इस प्रश्न का हल नहीं है।

— isherwood

Answer 5

लिंक गलत हैं, आपको यह करना होगा:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

आप इस ट्यूटोरियल को पढ़ सकते हैं

Comments

ब्रैकेट नोटेशन एक अलग उद्देश्य प्रदान करता है और इस समस्या को हल नहीं करता है।

— isherwood

यही था वह! <a hrouterLinkacing=" Is'/home'iding" rowLinkActive="active"> होम </a> मैं उस ट्यूटोरियल का अनुसरण कर रहा था जिसने मुझे <li> टैग में रूटरलिंकऐक्टिव रखा था। जब मैंने इसे <एक टैग में रखा तो यह अब काम करता है! बहुत धन्यवाद!!!! यह उत्कृष्ट है!

— रिच पी।

BTW, मेरे पास पहले से ही सभी अन्य टैग / सुझाए गए तत्व हैं। अब यह फीचर काम करता है (सॉर्ट)। मुझे बाकी ट्यूटोरियल का पालन करना होगा क्योंकि मैं नोटिस करता हूं कि जब मैं अन्य पंक्तियों का चयन करता हूं, भले ही चयनित पंक्ति के लिए मूल्य पारित किया जा रहा हो (मैं इसे यूआरएल में देखता हूं) केवल पहली पंक्ति का प्रतिपादन किया जा रहा है। लेकिन वह एक और विषय होगा। इस महान मदद के लिए फिर से बहुत धन्यवाद।

— रिच पी।

मुझे पता नहीं क्यों, लेकिन जब मैंने ब्रैकेट लगाया, तो यह मेरे लिए काम कर गया, और मैंने अपने ऐप मॉड्यूल में राउटरमॉडल आयात नहीं किया ..

— Cegone

Answer 6

मैं के बजाय routerlink का उपयोग कर रहा था routerLink ।

Comments

मैंने यह गलती की और यह तय हो गया! मुझे यह भी पता नहीं है कि आपको क्यों नीचा दिखाया गया (शायद क्योंकि यह इसके बजाय एक टिप्पणी हो सकती है या क्योंकि यह सीधे इस महत्वपूर्ण प्रश्न का उत्तर नहीं देता है?)। अच्छा होगा यदि जो लोग इसे कम करते हैं वे एक कारण प्रदान कर सकते हैं।

— जोनिविआर

Answer 7

मुझे पता है कि यह प्रश्न अब तक काफी पुराना है, और आपने इसे अब तक तय कर लिया है, लेकिन मैं यहाँ किसी को भी इस संदर्भ में पोस्ट करना चाहूंगा, जो इस समस्या का निवारण करते हुए इस पोस्ट को ढूंढता है, कि इस तरह की जीत हुई यदि आपके एंकर टैग इंडेक्स। html में हैं, तो काम न करें। यह घटकों में से एक में होना चाहिए

Answer 8

मॉड्यूल को विभाजित करने के बाद आपके मार्गों की जाँच करने के बाद किसी को भी यह त्रुटि हुई है , निम्नलिखित मेरे साथ हुआ:

सार्वजनिक-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

एप्लिकेशन-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

{ path: '**', redirectTo: 'home' }अपने AppRoutModule पर जाएं :

सार्वजनिक-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

एप्लिकेशन-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 9

एक और मामला भी है जो इस स्थिति के अनुकूल है। यदि आपके इंटरसेप्टर में, आपने इसे गैर-बूलियन मान लौटाया है, तो अंतिम परिणाम ऐसा है।

उदाहरण के लिए, मैंने obj && obj[key]सामान लौटाने की कोशिश की थी । थोड़ी देर तक डिबग करने के बाद, फिर मुझे महसूस होता है कि मुझे इसे बूलियन प्रकार में रूपांतरित करना होगा Boolean(obj && obj[key])ताकि क्लिक पास को जाने दिया जा सके।

Answer 10

काम के नमूने के बाद , मुझे शुद्ध घटक के मामले के लिए समाधान का पता चला है:

1. एप्लिकेशन स्तर पर घटक घोषित करें
2. घटक में इनिट न करें

Answer 11

मेरी तरह बहुत तेज आँखों के लिए, मेरे पास नहीं था href बजाय routerLink, मुझे कुछ खोज करने के लिए ले लिया जो #facepalm था।