কৌণিক উপায়ে Angular2 রুটে প্যারামিটার কিভাবে পাবেন?


87

রুট

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

উপাদান

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

লিঙ্কের উদাহরণ: http://localhost:8099/#/companies/bdo

আমি উপরের উদাহরণ লিঙ্কে String bdo পেতে চাই ।

আমি সচেতন যে আমি উইন্ডো.লোকেশন.href ব্যবহার করে এবং অ্যারেতে বিভক্ত হয়ে লিঙ্কটি পেতে পারি। সুতরাং, আমি সর্বশেষ পরম পেতে পারি তবে আমি এটি জানতে চাই যে এটি কৌণিক উপায়ে করার উপযুক্ত পদ্ধতি আছে কিনা।

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

উত্তর:


206

আপডেট: সেপ্টেম্বর 2019

যেমন কিছু লোক উল্লেখ করেছেন, প্যারামিটারগুলিতে paramMapসাধারণ MapAPI ব্যবহার করে অ্যাক্সেস করা উচিত :

প্যারামগুলির স্ন্যাপশট পেতে, যখন আপনি খেয়াল করেন না যে সেগুলি পরিবর্তন হতে পারে:

this.bankName = this.route.snapshot.paramMap.get('bank');

সাবস্ক্রাইব করতে এবং প্যারামিটার মানগুলিতে পরিবর্তনগুলি সম্পর্কে সতর্ক হতে (সাধারণত রাউটারের নেভিগেশনের ফলে)

this.route.paramMap.subscribe( paramMap => {
    this.bankName = paramMap.get('bank');
})

আপডেট: আগস্ট 2017

কৌণিক 4, paramsনতুন ইন্টারফেসের পক্ষে অবহেলা করা হয়েছে paramMap। উপরের সমস্যার কোডটি কার্যকর করা উচিত যদি আপনি কেবল অন্যটির জন্য একটি বিকল্প রাখেন।

আসল উত্তর

আপনি যদি ActivatedRouteনিজের উপাদানটি ইনজেক্ট করেন তবে আপনি রুটের পরামিতিগুলি বের করতে সক্ষম হবেন

    import {ActivatedRoute} from '@angular/router';
    ...
    
    constructor(private route:ActivatedRoute){}
    bankName:string;
    
    ngOnInit(){
        // 'bank' is the name of the route parameter
        this.bankName = this.route.snapshot.params['bank'];
    }

আপনি যদি আশা করেন যে ব্যবহারকারীরা প্রথমে অন্য কোনও উপাদানটিতে নেভিগেট না করে সরাসরি ব্যাংক থেকে ব্যাঙ্কে নেভিগেট করে, আপনার অবশ্যই পর্যবেক্ষণযোগ্য মাধ্যমে প্যারামিটারটি অ্যাক্সেস করা উচিত:

    ngOnInit(){
        this.route.params.subscribe( params =>
            this.bankName = params['bank'];
        )
    }

দস্তাবেজের জন্য, উভয়ের মধ্যে পার্থক্য সহ এই লিঙ্কটি পরীক্ষা করে দেখুন এবং " অ্যাক্টিভেট্রোট " অনুসন্ধান করুন


প্যারেন্ট উপাদানগুলির রাউটার-আউটলেটে লোড হওয়া উপাদানগুলি বিভিন্ন অ্যাক্টিউরট পরামিতি দেখতে পাবে - এমন কোনও বিধিনিষেধ রয়েছে কি - আমি এমন একটি মামলায় চলে এসেছি যেখানে পিতা-মাতা একটি পরামিতি দেখেন, তবে এতে থাকা উপাদানগুলি একই পরামিতিটি দেখতে পায় না ...
নিউওউরিস্ট

এটি আমার পক্ষে কাজ করছিল না কারণ আমি আমার উপাদানটির জন্য সরবরাহকারী হিসাবে অ্যাক্টিভেটরয়েট যুক্ত করেছি। সুতরাং, আপনি এটি না করেন তা নিশ্চিত করুন! এটি কৌণিক ৪.২.৪ সহ একটি কবিতার মতো কাজ করছে।
থমাস ওয়েববার

4
জন্য paramMap, আপনি params.get('bank')পরিবর্তে ব্যবহার করা উচিত ।
জুরফেক্স

মধ্যে পার্থক্য কি this.route.snapshot.paramMap.get('bank');এবং this.route.snapshot.params.bank;?
গিল এপস্টেইন

23

কৌণিক 6+ হিসাবে এটি পূর্ববর্তী সংস্করণগুলির তুলনায় কিছুটা আলাদাভাবে পরিচালনা করা হয়। যেমন @ বিটলজুইস উপরের উত্তরে উল্লেখ paramMapকরেছে, রুট প্যারামগুলি পাওয়ার জন্য নতুন ইন্টারফেস , তবে অ্যাঙ্গুলারের আরও সাম্প্রতিক সংস্করণে মৃত্যুদন্ড কার্যকর করা কিছুটা আলাদা। এটি একটি উপাদান হিসাবে ধরে নেওয়া:

private _entityId: number;

constructor(private _route: ActivatedRoute) {
    // ...
}

ngOnInit() {
    // For a static snapshot of the route...
    this._entityId = this._route.snapshot.paramMap.get('id');

    // For subscribing to the observable paramMap...
    this._route.paramMap.pipe(
        switchMap((params: ParamMap) => this._entityId = params.get('id'))
    );

    // Or as an alternative, with slightly different execution...
    this._route.paramMap.subscribe((params: ParamMap) =>  {
        this._entityId = params.get('id');
    });
}

আমি উভয়ই ব্যবহার করতে পছন্দ করি কারণ সরাসরি পৃষ্ঠার লোডে আমি আইডি পরম পেতে পারি এবং সম্পর্কিত সংস্থাগুলির মধ্যে নেভিগেট করা থাকলে সাবস্ক্রিপশনটি সঠিকভাবে আপডেট হবে।

কৌনিক দস্তাবেজের উত্স


4
switchMapএখানে কেন প্রয়োজন হবে? সাবস্ক্রাইব পাশাপাশি সরাসরি পৃষ্ঠা লোড কল করা হবে না?
26:25

4
@crush উপরে লিঙ্ক ডক্স থেকে: "আপনি RxJS ব্যবহার করতে মনে হতে পারে mapঅপারেটর কিন্তু। HeroServiceআয় একটি Observable<Hero>সুতরাং আপনার সাথে পর্যবেক্ষণযোগ্য চেপ্টা। switchMapপরিবর্তে অপারেটর। switchMapঅপারেটর আগের ইন-ফ্লাইট অনুরোধ বাতিল যদি ব্যবহারকারী পুনরায় নেভিগেট করে। একটি নতুন এই রুট idযখন HeroServiceএখনও পুরানো পুনরুদ্ধার করছে id, switchMapপরিত্যাগ পুরাতন অনুরোধ এবং আয় নতুন জন্য নায়ক যে id। "
কেএমজুঙ্গারসেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.