রাউটারলিঙ্ক কাজ করে না

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']"

— Günter Zöchbauer

হতে পারে আপনি directives: [ROUTER_DIRECTIVES],নিজের উপাদানটির মেটাডেটা যুক্ত করতে ভুলে গেছেন । এটি ছাড়া, কৌণিকগুলি এসগুলি বিশ্লেষণ করতে জানবে না routerLink।

— রাজকক

অ্যাঙ্গুলার 2 রাউটার লিঙ্কটির

— ইশারউড

Answer 1

আপনি যে কোডটি সেখানে দেখিয়ে দিচ্ছেন তা একেবারে সঠিক।

আমি সন্দেহ করি যে আপনার সমস্যাটি হ'ল আপনি এই টেমপ্লেটটি ব্যবহার করে মডিউলটিতে রাউটারমডুল (যা সেখানে রাউটারলিঙ্ক ঘোষণা করা হয়) আমদানি করছেন না।

আমারও অনুরূপ সমস্যা ছিল এবং সমাধানে আমার কিছুটা সময় লেগেছিল কারণ ডকুমেন্টেশনে এই পদক্ষেপটির উল্লেখ নেই।

সুতরাং এই টেম্পলেটটি দিয়ে উপাদানটি ঘোষণা করে এমন মডিউলটিতে যান এবং যুক্ত করুন:

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

তারপরে এটি আপনার মডিউলগুলির আমদানিতে যেমন যোগ করুন

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

সঠিক আমদানির বিবরণী থাকার পাশাপাশি, আপনাকে সেই রাউটার লিঙ্কটি প্রদর্শনের জন্য একটি জায়গাও প্রয়োজন হবে যা <router-outlet></router-outlet>উপাদানটিতে রয়েছে, যাতে আপনার এইচটিএমএল মার্কআপে কোথাও স্থাপন করাও প্রয়োজন যাতে রাউটারটি কোথায় সেই ডেটা প্রদর্শন করতে পারে তা জানে।

Comments

আমি ভেবেছিলাম এবং হ্যাঁ - আপনি আমার ক্ষেত্রেও একদম ঠিক বলেছেন!

— ধনঞ্জয়

আমার আমদানিতে রাউটার মডিউল যুক্ত করা কৌশলটি করেছে, ধন্যবাদ!

— ENDEESA

আমার জন্য কাজ কর. অনেক ধন্যবাদ!

— দ্য বোস্টি

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>

এছাড়াও, সূচিপত্রের শিরোনামে নিম্নলিখিতগুলি যুক্ত করুন html:

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

Answer 4

এই বিষয়টি পড়তে ম্রো তথ্যগুলির জন্য এটির মতো এটি ব্যবহার করুন

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

Comments

আপনার লিঙ্ক অনুসারে, তাঁর routerLinkকাজ করা উচিত ;-)

— গন্টার জ্যাচবাউয়ার

এই জন্য কাজ করে "@angular/router": "~3.4.0"। চিয়ার্স!

— মাইকিম

হ্যাঁ, বন্ধনী চিহ্নিতকরণ কাজ করে (এবং নির্দিষ্ট উদ্দেশ্য হিসাবে এটি বৈধ বাক্য গঠন), তবে এটি এই প্রশ্নের সমাধান নয় solution

— ইশারউড

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

ব্র্যাকেট স্বরলিপি একটি ভিন্ন উদ্দেশ্যে পরিবেশন করে এবং এই সমস্যাটি সমাধান করে না।

— ইশারউড

ইহা ওইটাই ছিল! <a [routerLink==" ئې'/home' কাঠ "রাউটারলিঙ্কএকটিভ=" অ্যাক্টিভ "> হোম </a> আমি টিউটোরিয়ালটি অনুসরণ করছিলাম যা আমাকে রা-লিঙ্কএকটিভকে <li> ট্যাগে রেখেছিল। যখন আমি এটি <ট্যাগ ট্যাগে রাখি এটি এখন কাজ করে! অনেক ধন্যবাদ!!!! এটি দুর্দান্ত!

— ধনী পি

বিটিডাব্লু, আমার কাছে ইতিমধ্যে অন্য সমস্ত ট্যাগ / প্রস্তাবিত উপাদান রয়েছে। এখন এই বৈশিষ্ট্যটি (সাজানো) কাজ করে। আমাকে বাকি টিউটোরিয়ালটি অনুসরণ করতে হবে কারণ আমি লক্ষ্য করেছি যে আমি যখন অন্যান্য সারিগুলি নির্বাচন করি তখনও নির্বাচিত সারির মানটি পাস হয়ে যায় (আমি এটি ইউআরএলটিতে দেখি) কেবল প্রথম সারিটি রেন্ডার করা হচ্ছে। তবে এটি অন্য বিষয় হবে। এই মহান সহায়তার জন্য আবার অনেক ধন্যবাদ।

— ধনী পি

আমি জানি না, তবে আমি যখন বন্ধনী রাখি তখন এটি আমার পক্ষে কাজ করে, এবং আমি আমার অ্যাপ্লিকেশন মডিউলে রাউটারমডুল আমদানি করি নি ..

— সেগোন

Answer 6

আমি রাউটারলিঙ্কের পরিবর্তে রাউটারলিঙ্ক ব্যবহার করছিলাম ।

Comments

আমি এই ভুল করেছি এবং এটি এটি স্থির! কেন আপনি নিম্নচালিত হয়েছিলেন তা আমারও ধারণা নেই (সম্ভবত এটি পরিবর্তে কোনও মন্তব্য হতে পারে বা কারণ এটি সরাসরি এই নির্দিষ্ট প্রশ্নের উত্তর দেয় না?)। যদি লোকেরা এটি হ্রাস করে তাদের কোনও কারণ প্রদান করতে পারে তবে খুব ভাল।

— JoniVR

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' }আপনার AppRoutingModule এ যান :

জন-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

আরও একটি মামলা রয়েছে যা এই পরিস্থিতিতে উপযুক্ত। যদি আপনার ইন্টারসেপ্টারে থাকে তবে আপনি এটিকে বুলিয়ানবিহীন মান ফিরিয়ে দিয়েছিলেন, শেষ ফলাফলটি এর মতো is

উদাহরণস্বরূপ, আমি obj && obj[key]জিনিস ফেরত দেওয়ার চেষ্টা করেছি had কিছুক্ষণ ডিবাগ করার পরে, আমি বুঝতে পেরেছি Boolean(obj && obj[key])যে ক্লিকটি পাস হতে দিতে আমাকে নিজেই এটি বুলিয়ান টাইপে রূপান্তর করতে হবে।

Answer 10

কাজের নমুনা অনুসরণ করে , আমি খাঁটি উপাদানগুলির ক্ষেত্রে সমাধানটি বের করেছি:

1. অ্যাপ পর্যায়ে উপাদান ঘোষণা করুন
2. উপাদান মধ্যে আরম্ভ করবেন না

Answer 11

আমার মতো খুব তীক্ষ্ণ চোখের জন্য, আমি তার hrefপরিবর্তে routerLink, আমাকে # পৃষ্ঠার চিত্রটি খুঁজে বের করার জন্য কয়েকটি অনুসন্ধান নিয়েছিলাম।