[राऊटरलिंक] और राउटरलिंक के बीच अंतर

Question

बीच क्या अंतर है [routerLink]और routerLink? आपको हर एक का उपयोग कैसे करना चाहिए?

Comments

वे एक ही निर्देश हैं। आप डायनामिक मान पास करने के लिए पहले एक का उपयोग करते हैं, और दूसरा एक स्ट्रिंग के रूप में एक स्थिर पथ को पारित करने के लिए। यह प्रलेखन में विस्तृत है: angular.io/docs/ts/latest/api/router/index/…

— JB Nizet

angular.io/guide/router#routerlink-binding

— रे

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

— फिब्लेक्सिस

Answer 2

मान लो कि तुम्हारे पास है

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

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

इसका अर्थ है कि रेसिपी हाइपरलिंक पर क्लिक करने से http: // localhost: 4200 / रेसिपी पर कूद जाएगा

मान लें कि पैरामीटर 1 है

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

इसका अर्थ है कि डायनेमिक पैरामीटर, लिंक से 1, फिर आप http: // localhost: 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

जब आप कोष्ठक के साथ राउटरलिंक का उपयोग करते हैं तो आप पूर्ण रूप से नेविगेट करने के लिए ऐप निष्पादित करते हैं और आप परमेस जोड़ सकते हैं कि आपके नए लिंक की पहेली कैसी है

सबसे पहले इसमें डैशबोर्ड / डैशबोर्ड / क्लाइंट / क्लाइंट-आईडी से "जंप" शामिल नहीं होगा और आपको क्लाइंट / क्लाइंट-आईडी का डेटा मिलेगा जो EDIT CLIENT के लिए अधिक उपयोगी है

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

निरपेक्ष तरीका या कोष्ठक राउटरलिंक को आपके लिए अतिरिक्त सेट अप घटकों और app.rout.module.ts की आवश्यकता होती है

बिना त्रुटि के कोड "आपको और अधिक बताएगा / क्या आप परीक्षण करते समय []" का उद्देश्य है। बस इसके साथ या उसके बिना जाँच करें]। आप चयनकर्ताओं के साथ प्रयोग कर सकते हैं - जैसा कि ऊपर बताया गया है - डायनेमिक्स रूटिंग के साथ मदद करता है।

Angular.io चयनकर्ता

राऊटरलिंक निर्माण देखें

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