112

मैं एक बटन क्लिक करके दूसरे पृष्ठ पर नेविगेट करने का प्रयास कर रहा हूं लेकिन यह काम करने में विफल है। क्या समस्या हो सकती है। मैं अब कोणीय 2 सीख रहा हूं और यह अब मेरे लिए थोड़ा कठिन है।

//Routes/Path in a folder call AdminBoard

export const AdminRoutes: Routes =[

  {
    path: 'dashboard',

    component: AdminComponent,
    children: [
      {path: '', redirectTo: 'Home'},
      {path: 'Home', component: HomeComponent},
      {path: 'Service', component: ServiceComponent},
      {path: 'Service/Sign_in', component:CustomerComponent}

    ]

  }

];

//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}

  <button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>

angular

— लिस्का लिकोर
स्रोत

1

कुछ इस तरह से प्रयास करें:<button class="btn btn-success pull-right" ><a [routerLink]="[ '.', 'Service/Sign_in' ]"> Add Customer</a></button>

— अवनीश शाक्य

253

इसे इस तरह उपयोग करें, काम करना चाहिए:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

आप router.navigateByUrl('..')इस तरह का भी उपयोग कर सकते हैं :

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>    

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

btnClick= function () {
        this.router.navigateByUrl('/user');
};

अपडेट करें

आपको Routerकंस्ट्रक्टर में इस तरह इंजेक्ट करना होगा:

constructor(private router: Router) { }

तभी आप उपयोग करने में सक्षम हैं this.router। RouterModuleअपने मॉड्यूल में आयात करना भी याद रखें ।

अपडेट २

अब, Angular v4 के बाद आप सीधे routerLinkबटन पर विशेषता जोड़ सकते हैं (जैसा कि टिप्पणी अनुभाग में @mark द्वारा उल्लेख किया गया है) नीचे की तरह -

 <button [routerLink]="'/url'"> Button Label</button>

— परदीप जैन
स्रोत

2

क्या मैं इसके साथ कुछ डेटा भेज सकता हूं?

— अनुज

12

यकीन नहीं होता कि चीजें लिखी गई हैं, लेकिन अक्टूबर 2018 तक, ऐसा लगता है कि आप [routerLink]सीधे इस विशेषता को डाल सकते हैं <button>(जो कुछ स्टाइल समस्याओं से बचाती है जो बटन को लपेटते समय फसल कर सकती हैं <a>)

— मार्क एडेल्सबर्गर

तो कौन सा रास्ता सबसे साफ है? क्या मार्कअप में मार्ग को उजागर नहीं करना बेहतर है, लेकिन इसे टाइपस्क्रिप्ट फ़ाइल में रखने के बजाय, या [routerLink]टेम्पलेट के साथ 'नया' तरीका है ?

— रिन और लेन

यह आपके ऊपर है, IMO, टेम्पलेट में अपने मार्कअप को छिपाने के लिए कोई तर्क नहीं है क्योंकि आप उपयोगकर्ता को नेविगेट करने जा रहे हैं अगले पृष्ठ में देख सकते हैं। बाकी दोनों एक ही हैं, मुझे लगता है

— परदीप जैन

1

पहले स्तर पर html fileजहां कंपोनेंट लोड किया जाना है, उसमें <router-outlet></router-outlet>टैग होना चाहिए । कृपया अधिक जानकारी के लिए angular.io/api/router/RouterOutlet#description देखें।

— थरुह

36

आप निम्नलिखित तरीके से राउटरलिंक का उपयोग कर सकते हैं,

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">

या <button [routerLink]="['./url']">आपके मामले में उपयोग , अधिक जानकारी के लिए आप पूरी स्टिचट्रेस को जीथब https://github.com/angular/angular/issues/9471 पर पढ़ सकते हैं

अन्य विधियां भी सही हैं, लेकिन वे घटक फ़ाइल पर निर्भरता बनाते हैं।

आशा है कि आपकी चिंता दूर हो जाएगी।

— रोनित ओमन
स्रोत

1

@Ronit क्यों नहीं: <बटन प्रकार = "बटन" मान = "बल्क पूछताछ जोड़ें" रूटरलिंक = "../ addBulkEnquiry" वर्ग = "btn">? आप वर्ग कोष्ठक का उपयोग क्यों कर रहे हैं?

— एंडी किंग

1

@AndyKing क्योंकि वह एक अभिव्यक्ति (एक मान के रूप में एक सरणी) का उपयोग कर रहा है, foo="boo" जैसे है [foo]="'boo'"। शायद आप stackoverflow.com/questions/43633452/…

— फोनिक्स

1

मैं इस उत्तर को पसंद करता हूं

— Hung31M2

13

 <button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>


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

btnClick= function () {
        this.router.navigate(['/user']);
};

— अनिकेत
स्रोत

मैंने पहले ऐसा ही कुछ किया था (राऊटर का उपयोग करके), फिर अन्य विचारों की तलाश की, और अब अन्य उत्तरों में बताए अनुसार रूटरलिंक का उपयोग करें। मुझे आश्चर्य है कि कौन बेहतर है, या अगर यह मायने रखता है ...

— स्कॉट

1

यह महत्वपूर्ण है कि आप राउटर लिंक और लिंक को वर्गाकार कोष्ठक से सजाएं:

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

जहां इस मामले में " / सेवा " मार्ग घटक में निर्दिष्ट पथ यूआरएल है।

— Mwiza
स्रोत

0

बटन पर राउटर लिंक होना मेरे लिए ठीक काम करता है:

<button class="nav-link" routerLink="/" (click)="hideMenu()">
     <i class="fa fa-home"></i> 
     <span>Home</span>
</button>

— रॉब मैककेब
स्रोत

0

तुम बदल सकते हो

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
निर्माता में घटक स्तर पर जैसे बलो

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}

— पागल जावद
स्रोत

0

इन कदमों का अनुसरण करें

अपने मुख्य घटक में आयात जोड़ें

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

उसी फ़ाइल में कंस्ट्रक्टर और विधि के लिए नीचे कोड जोड़ें

constructor(private route: Router) {}
public Dashbord()
{
 this.route.navigate(['/dashboard']);
}

यह आपका .htmlफ़ाइल कोड है

<button mat-button (click)="Dashbord()">Dashboard</button><br>

में app-routing.module.tsफ़ाइल जोड़ने डैशबोर्ड

const routes: Routes =
[
  { path: '', pathMatch: 'full' ,component: TestComponent},
  { path: 'dashboard', component: DashboardComponent } 
];

सौभाग्य।

— अरविंद चौरसिया
स्रोत

कोणीय 2 में एक बटन के साथ दूसरे पृष्ठ पर नेविगेट करें

अपडेट करें

अपडेट २