javascript - কৌণিক ক্ষেত্রে, আপনি কীভাবে সক্রিয় রুট নির্ধারণ করবেন?




typescript angular (19)

দ্রষ্টব্য: এখানে অনেকগুলি পৃথক উত্তর রয়েছে এবং বেশিরভাগই এক সময় বা অন্য সময়ে বৈধ হয়েছে। আসল বিষয়টি হ'ল অ্যাঙ্গুলার দলটি তার রাউটার বদলে যা কাজ করেছে তা বহুবার পরিবর্তিত হয়েছে। রাউটার in.০ সংস্করণ যা শেষ পর্যন্ত কৌনিকটিতে রাউটার হয়ে উঠবে এর মধ্যে অনেকগুলি সমাধান ভেঙে যায় তবে এর নিজস্ব একটি খুব সাধারণ সমাধান সরবরাহ করা হয়। আরসি ৩. হিসাবে, পছন্দসই সমাধানটি হ'ল [routerLinkActive] যা এই উত্তরে দেখানো হয়েছে [routerLinkActive]

একটি কৌণিক অ্যাপ্লিকেশনটিতে (আমি এটি লিখার সাথে সাথে ২.০.০-বিটা.0 রিলিজে বর্তমান) বর্তমানে সক্রিয় রুটটি কী তা আপনি কীভাবে নির্ধারণ করবেন?

আমি এমন একটি অ্যাপে কাজ করছি যা বুটস্ট্র্যাপ 4 ব্যবহার করে এবং নেভিগেশন লিঙ্কগুলি বা বোতামগুলি সক্রিয় হিসাবে চিহ্নিত করার জন্য একটি উপায়ের প্রয়োজন যখন তাদের সম্পর্কিত উপাদানটি <router-output> ট্যাগে প্রদর্শিত হচ্ছে।

আমি বুঝতে পারি যে কোনও একটি বাটন ক্লিক করা হলে আমি নিজেই রাজ্যটি বজায় রাখতে পারি, তবে এটি একই রুটে একাধিক পাথ থাকার ক্ষেত্রে আবশ্যক নয় (মূল ন্যাভিগেশন মেনু পাশাপাশি মূল উপাদানটিতে একটি স্থানীয় মেনু বলুন) )।

কোন পরামর্শ বা লিঙ্ক প্রশংসা করা হবে। ধন্যবাদ।


বর্তমানে সক্রিয় রুটটি কীভাবে আপনি নির্ধারণ করবেন?

আপডেট: অ্যাঙ্গুলার 2.4.x অনুযায়ী আপডেট হয়েছে

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

আরো দেখুন...


Angular2 RC2 এ আপনি এই সাধারণ বাস্তবায়নটি ব্যবহার করতে পারেন

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

এটি মিলিত url সহ উপাদানটিতে active ক্লাস যুক্ত করবে, এ সম্পর্কে angular.io/docs/ts/latest/api/router/index/… আরও পড়ুন


আজ অবধি প্রকাশিত কৌনিক 2 আরসি সংস্করণের সমস্ত সংস্করণগুলির জন্য নীচে এই প্রশ্নের উত্তর দেওয়া হল:

আরসি 4 এবং আরসি 3 :

লিঙ্ক বা পূর্বপুরুষ লিঙ্ক ক্লাস প্রয়োগ করার জন্য:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ বাড়ির ইউআরএল হওয়া উচিত এবং রুটের নাম নয়, কারণ রাউটার ভি 3 হিসাবে নামের সম্পত্তি আর রুট অবজেক্টে বিদ্যমান নেই।

এই angular.io/docs/ts/latest/api/router/index/… রাউটারলিঙ্কঅ্যাকটিভ নির্দেশিকা সম্পর্কে আরও।

বর্তমান রুটের ভিত্তিতে যে কোনও ডিভিতে ক্লাস প্রয়োগের জন্য:

  • উপাদানটির কনস্ট্রাক্টরে রাউটার ইনজেকশন করুন।
  • তুলনার জন্য ব্যবহারকারী রাউটার.আরএল।

যেমন

<nav [class.transparent]="router.url==('/home')">
</nav>

আরসি 2 এবং আরসি 1 :

রাউটার.আইআরউটিএকটিভ এবং ক্লাসের সমন্বয় ব্যবহার করুন * * যেমন হোম রুটের উপর ভিত্তি করে সক্রিয় শ্রেণি প্রয়োগ করা।

নাম এবং ইউআরএল উভয়ই রাউটার.জেনারেটে পাস করা যেতে পারে।

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

আপনার .ts এ রাউটারলিঙ্কএকটিভ আমদানি করে শুরু করুন

'@ কৌণিক / রাউটার' থেকে import রাউটারলিঙ্কএকটিভ import আমদানি করুন;

এখন আপনার এইচটিএমএলে রাউটারলিঙ্কএকটিভ ব্যবহার করুন

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

"class_Name" ক্লাসে কিছু সিএসএস সরবরাহ করুন, যেমন এই লিঙ্কটি সক্রিয় / ক্লিক করা হবে আপনি পরিদর্শন করার সময় এই ক্লাসটি স্প্যানটিতে দেখতে পাবেন।


আমি Angular2 এর সাথে একটি টুইটার বুটস্ট্র্যাপ স্টাইল এনএভি ব্যবহার করার উপায় খুঁজছিলাম, তবে নির্বাচিত লিঙ্কটির মূল উপাদানটিতে active শ্রেণি প্রয়োগ করতে সমস্যা হয়েছিল trouble পাওয়া গেছে যে @ অ্যালেক্স-কারিয়া-স্যান্টোসের সমাধান পুরোপুরি কার্যকরভাবে কাজ করে!

আপনার ট্যাবযুক্ত উপাদানটি আপনাকে প্রয়োজনীয় কল করার আগে রাউটারটি আমদানি করতে হবে এবং নির্মাতায় এটি সংজ্ঞায়িত করতে হবে।

আমার প্রয়োগের একটি সরল সংস্করণ এখানে ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

আমি এটি অন্য প্রশ্নের জবাব দিয়েছি তবে আমি বিশ্বাস করি এটি সম্ভবত এটির সাথেও প্রাসঙ্গিক হতে পারে। এখানে মূল উত্তরের একটি লিঙ্ক: কৌণিক 2: পরামিতিগুলির সাথে সক্রিয় রুটটি কীভাবে নির্ধারণ করা যায়?

আমি বর্তমান অবস্থানটি (রুটের নাম ব্যবহার করে) ঠিক কী তা জেনেও সক্রিয় শ্রেণি স্থাপনের চেষ্টা করছি। Router ক্লাসে পাওয়া isRouteActive ফাংশনটি ব্যবহার করে এখন পর্যন্ত আমার কাছে পাওয়া সেরা সমাধান।

router.isRouteActive(instruction): Boolean একটি প্যারামিটার নেয় যা একটি রুট Instruction অবজেক্ট হয় এবং সেই নির্দেশটি বর্তমান রুটের জন্য সত্য রাখে বা না তা true বা false প্রত্যাবর্তন করে। আপনি Router জেনারেট (লিংকপ্যারামস: অ্যারে) ব্যবহার করে একটি রুট Instruction তৈরি করতে পারেন। লিঙ্কপ্যারামগুলি routerLink নির্দেশিকায় (যেমন router.isRouteActive(router.generate(['/User', { user: user.id }])) ) হিসাবে পাস করা মানের মতো ঠিক একই বিন্যাস অনুসরণ করে।

এইভাবে রুটকনফিগ দেখতে পেল ( প্যারামগুলির ব্যবহার দেখানোর জন্য আমি এটি কিছুটা টুইট করেছি) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

এবং ভিউটি দেখতে এইরকম হবে:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

এখনও পর্যন্ত সমস্যার জন্য এটি আমার পছন্দের সমাধান হয়ে উঠেছে, এটি আপনার পক্ষেও সহায়ক হতে পারে।


আরেকটি ওয়ার্কারআউন্ড। কৌণিক রাউটার ভি 3 আলফায় অনেক সহজ। রাউটার ইনজেকশন দ্বারা

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

ব্যবহার

<div *ngIf="routeIsActive('/')"> My content </div>

এই link আমি যে সমস্যার মুখোমুখি হয়েছিলাম তা সমাধান করেছি এবং আমি জানতে পারি যে আপনার প্রশ্নের সহজ সমাধান রয়েছে। আপনি আপনার স্টাইলগুলির পরিবর্তে router-link-active ব্যবহার করতে পারেন।

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

এবং router.isActive(routeNameAsString) সর্বশেষতম সংস্করণে, আপনি কেবল router.isActive(routeNameAsString) চেক করতে পারেন। উদাহরণস্বরূপ নীচের উদাহরণটি দেখুন:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

এবং নিশ্চিত করুন যে আপনি নিজের উপাদানটিতে ইঞ্জেকশন রাউটারটি ভুলে যাচ্ছেন না।


কৌণিক 2 isRouteActive আর isRouteActive এবং generate পদ্ধতিগুলি সংজ্ঞায়িত করে না।

urlTree - বর্তমান url ট্রি প্রদান করে।

createUrlTree(commands: any[], segment?: RouteSegment) - বর্তমান url ট্রিতে কমান্ডের একটি অ্যারে প্রয়োগ করে একটি নতুন url ট্রি তৈরি করে।

অনুসরণ করার চেষ্টা করুন

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

বিজ্ঞপ্তি, routeSegment : RouteSegment অবশ্যই কম্পোনেন্টের কনস্ট্রাক্টারে ইনজেকশন করা উচিত।


কৌণিক সংস্করণ 4+ এর জন্য আপনার কোনও জটিল সমাধান ব্যবহার করার দরকার নেই। আপনি কেবল [routerLinkActive]="'is-active'" ব্যবহার করতে পারেন।

বুটস্ট্র্যাপ 4 ন্যাভ লিঙ্ক সহ উদাহরণের জন্য:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

কৌনিক 8 হিসাবে, এটি কাজ করে:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } এটি ইউআরএলের সাথে মেলে তা নিশ্চিত করে।


গৃহীত উত্তরের একটি মন্তব্যে যেমন উল্লেখ করা হয়েছে, routerLinkActive নির্দেশিকা প্রকৃত <a> ট্যাগের routerLinkActive প্রয়োগ করা যেতে পারে।

সুতরাং উদাহরণস্বরূপ টুইটার বুটস্ট্র্যাপ ট্যাবগুলির সাথে যেখানে সক্রিয় ক্লাসটি লিঙ্কযুক্ত <li> ট্যাগে প্রয়োগ করা উচিত:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

বেশ ঝরঝরে ! আমি মনে করি যে নির্দেশিকাটি ট্যাগের সামগ্রীটি পরীক্ষা করে এবং routerLink নির্দেশনার সাথে <a> ট্যাগ routerLink


নতুন কৌণিক রাউটারের সাহায্যে আপনি আপনার সমস্ত [routerLinkActive]="['your-class-name']" একটি [routerLinkActive]="['your-class-name']" যুক্ত করতে পারেন:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

বা সরলীকৃত অ-অ্যারে বিন্যাস যদি কেবলমাত্র এক শ্রেণির প্রয়োজন হয়:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

অথবা একটি আরও সহজ বিন্যাস যদি কেবল একটি শ্রেণীর প্রয়োজন হয়:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

আরও তথ্যের জন্য দুর্বল নথিভুক্ত routerLinkActive নির্দেশিকা দেখুন। (আমি বেশিরভাগই ট্রায়াল-অ্যান্ড-ত্রুটির মাধ্যমে এটি আবিষ্কার করেছি))

আপডেট: routerLinkActive নির্দেশের জন্য আরও ভাল ডকুমেন্টেশন এখন here পাওয়া here । (নীচের মন্তব্যে @ ভিক্টর হুগো আরঙ্গো এ-কে ধন্যবাদ জানাই))


ভেবেছিলাম আমি এমন একটি উদাহরণ যুক্ত করব যা কোনও ধরণের স্ক্রিপ্ট ব্যবহার করে না:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

routerLinkActive ভেরিয়েবল একটি টেম্পলেট ভেরিয়েবলের সাথে আবদ্ধ এবং তারপরে প্রয়োজনীয় হিসাবে পুনরায় ব্যবহার করা হবে। দুর্ভাগ্যক্রমে একমাত্র #home পার্সার হিট <section> আগে #home সমাধান করা দরকার বলে <section> উপাদানটিতে আপনার সমস্ত কিছুই থাকতে পারে না।


যাক আপনি আমার সক্রিয় রাষ্ট্র / ট্যাবে সিএসএস যুক্ত করতে চান। আপনার রাউটিং লিঙ্কটি সক্রিয় করতে রাউটারলিঙ্কঅ্যাকটিভ ব্যবহার করুন।

দ্রষ্টব্য: 'সক্রিয়' এখানে আমার শ্রেণীর নাম

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

সক্রিয় রুটগুলি routerLinkActive করতে routerLinkActive ব্যবহার করা যেতে পারে

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

এটি অন্যান্য উপাদানগুলির মতোও কাজ করে

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

আংশিক ম্যাচগুলি যদি ব্যবহার হিসাবে চিহ্নিত করা হয় তবে

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

আমি exact: false জানি exact: false আরসি 4-এ মিথ্যাটি ডিফল্ট হতে চলেছে


https://github.com/angular/angular/pull/6407#issuecomment-190179875 উপর ভিত্তি করে @ অ্যালেক্স-কারিয়া-স্যান্টোসের উত্তরের ছোট উন্নতি

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

এবং এটি এর মতো ব্যবহার করুন:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

routerLinkActive ব্যবহার সহজ ক্ষেত্রে খুব ভাল, যখন কোনও লিঙ্ক থাকে এবং আপনি কিছু ক্লাস প্রয়োগ করতে চান। তবে আরও জটিল ক্ষেত্রে যেখানে আপনার রাউটার লিঙ্ক নাও থাকতে পারে বা যেখানে আপনার আরও কিছু প্রয়োজন সেখানে আপনি পাইপ তৈরি এবং ব্যবহার করতে পারেন:

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

তারপর:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

এবং পাইপ নির্ভরতাগুলিতে পাইপ অন্তর্ভুক্ত করতে ভুলবেন না;)








angular2-routing