[राउटरलिंक] और राउटरलिंक

Question

के बीच अंतर [routerLink] और routerLink के बीच क्या अंतर है? जब प्रत्येक का उपयोग करें?

Answer 1

आप सभी निर्देशों में यह देखेंगे:

आप कोष्ठक उपयोग करते हैं, तो इसका मतलब है कि आप एक bindable संपत्ति (एक चर) गुजर रहे हैं।

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

तो यह चर (routerLinkVariable) अपने वर्ग के भीतर परिभाषित किया जा सकता है और यह नीचे की तरह मान होना चाहिए:

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> 

अद्यतन:

तो एक नया वेरिएबल

जोड़ने:

routerLink लिए विशेष रूप से कोष्ठक का उपयोग कर के बारे में अन्य विशेषता यह है कि आप लिंक आप को नेविगेट कर रहे करने के लिए गतिशील पैरामीटर पारित कर सकते हैं है

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

[राउटरलिंक]

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

अपडेट करना

जब आप इस लिंक पर क्लिक करना चाहते हैं, यह बन गयी:

<a href="/home/129"></a> 

Answer 2

मान लें कि आप

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

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

है इसका मतलब है कि क्लिक करने व्यंजनों हाइपरलिंक http://localhost:4200/recipes

पर चला जाएगा मान लें कि पैरामीटर 1

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

इसका मतलब है कि गतिशील पैरामीटर को पार करना, लिंक पर 1, फिर आप http://localhost:4200/recipes/1