[রাউটারলিঙ্ক] এবং রাউটার লিঙ্কের মধ্যে পার্থক্য

Question

মধ্যে পার্থক্য কি [routerLink]এবং routerLink? আপনি প্রতিটি ব্যবহার করা উচিত?

Comments

তারা একই নির্দেশ। আপনি গতিশীল মানটি পাস করার জন্য প্রথমটি ব্যবহার করেন এবং দ্বিতীয়টি স্ট্রিং হিসাবে স্থিতিশীল পথটি পাস করেন। এটি ডকুমেন্টেশনে বিশদভাবে রয়েছে

— জেবি নিজেট

angular.io/guide/router#routerlink- বাইন্ডিং

— রে

Answer 1

আপনি এটি সমস্ত নির্দেশিকায় দেখতে পাবেন:

আপনি যখন বন্ধনী ব্যবহার করেন, এর অর্থ আপনি একটি বিন্যযোগ্য সম্পত্তি (একটি ভেরিয়েবল) পাস করছেন।

  <a [routerLink]="routerLinkVariable"></a>

সুতরাং এই পরিবর্তনশীল (রাউটারলিঙ্কভেরিয়েবল) আপনার শ্রেণীর ভিতরে সংজ্ঞায়িত করা যেতে পারে এবং এটির নীচের মতো একটি মান থাকতে হবে:

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!

তবে ভেরিয়েবলের সাহায্যে আপনার এটিকে ডায়নামিক করার সুযোগ রয়েছে?

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

যেখানে বন্ধনী ব্যতীত আপনি কেবল স্ট্রিং পার করছেন এবং আপনি এটি পরিবর্তন করতে পারবেন না, এটি হার্ড কোডেড এবং এটি আপনার অ্যাপ্লিকেশন জুড়েই হবে।

<a routerLink="/home"></a>

হালনাগাদ :

রাউটারলিঙ্কের জন্য বিশেষত বন্ধনী ব্যবহার সম্পর্কে অন্যান্য বিশেষত্ব হ'ল আপনি যে লিঙ্কটিতে নেভিগেশন করছেন তার গতিশীল প্যারামিটারগুলি পাস করতে পারবেন:

সুতরাং একটি নতুন পরিবর্তনশীল যুক্ত

export class myComponent {
        private dynamicParameter = '129';
        public routerLinkVariable = "/home"; 

[রাউটার লিঙ্ক] আপডেট করা হচ্ছে

  <a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>

আপনি যখন এই লিঙ্কটিতে ক্লিক করতে চান, এটি হয়ে যাবে:

  <a href="https://stackoverflow.com/home/129"></a>

Comments

দুর্দান্ত ব্যাখ্যা! ধন্যবাদ! +1

— fablexis

Answer 2

ধরে নিন যে আপনার আছে

const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>

এর অর্থ হ'ল রেসিপি হাইপারলিংক ক্লিক করা http: // লোকালহোস্ট: 4200 / রেসিপিগুলিতে চলে যাবে

ধরুন প্যারামিটারটি 1

<a [routerLink] = "['/recipes', parameter]"></a>

এর অর্থ হ'ল ডায়ামিক প্যারামিটারটি, লিঙ্কটিতে 1 টি পাস করা, তারপরে আপনি http: // লোকালহোস্ট: 4200 / রেসিপি / 1 এ যান

Answer 3

রাউটার লিঙ্ক

বন্ধনী এবং কিছুই সহ রাউটারলিঙ্ক - সহজ ব্যাখ্যা।

রাউটারলিঙ্ক = এবং [রাউটারলিঙ্ক] এর মধ্যে পার্থক্য বেশিরভাগ আপেক্ষিক এবং পরম পথের মতো।

Href এর মতোই আপনি। /About.html বা https://your-site.com/about.html এ নেভিগেট করতে চাইতে পারেন ।

আপনি যখন বন্ধনী ছাড়াই ব্যবহার করেন তখন আপনি আপেক্ষিক এবং প্যারাম ছাড়াই নেভিগেট করেন;

my-app.com/dashboard/client

"জাম্পিং" থেকে my-app.com/dashboard করার my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

যখন আপনি বন্ধনীর সাহায্যে রাউটারলিঙ্ক ব্যবহার করেন তখন আপনি নিখুঁত নেভিগেট করার জন্য অ্যাপ্লিকেশনটি কার্যকর করেন এবং আপনি কীভাবে আপনার নতুন লিঙ্কের ধাঁধাটি প্যারামগুলি যুক্ত করতে পারেন?

প্রথমত এটি ড্যাশবোর্ড থেকে "লাফ" অন্তর্ভুক্ত করবে না / ড্যাশবোর্ড / ক্লায়েন্ট / ক্লায়েন্ট-আইডি এবং আপনার কাছে ক্লায়েন্ট / ক্লায়েন্ট-আইডি ডেটা নিয়ে আসবে যা সম্পাদনা ক্লায়েন্টের জন্য আরও সহায়ক helpful

<a [routerLink]="['/client', client.id]" ... rest the same

পরম উপায় বা বন্ধনী রাউটার লিঙ্ক আপনার অতিরিক্ত উপাদান এবং app.routing.module.ts সেট আপ প্রয়োজন

ত্রুটিবিহীন কোডটি যখন আপনি পরীক্ষা করবেন তখন "আপনাকে আরও / আরও বলবেন []" এর উদ্দেশ্য কি। কেবল [] এর সাথে বা ছাড়া এটি পরীক্ষা করুন। নির্বাচকদের সাথে আপনি পরীক্ষা-নিরীক্ষা করতে পারেন যা উপরে উল্লেখ করা হয়েছে - গতিশীলতার রাউটিংয়ে সহায়তা করে।

Angular.io নির্বাচক

রাউটারলিঙ্কটি কী নির্মাণ করছে তা দেখুন

https://angular.io/api/router/RouterLink#selectors