কৌণিক 2 এ বোতামের সাহায্যে অন্য পৃষ্ঠায় নেভিগেট করুন

Question

আমি একটি বোতামে ক্লিক করে অন্য পৃষ্ঠায় নেভিগেট করার চেষ্টা করছি তবে এটি কাজ করতে ব্যর্থ। কি সমস্যা হতে পারে. আমি এখন কৌনিক 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>

Comments

এর মতো কিছু চেষ্টা করুন:<button class="btn btn-success pull-right" ><a [routerLink]="[ '.', 'Service/Sign_in' ]"> Add Customer</a></button>

— অবনীশ শাক্য

Answer 1

এটি ব্যবহার করুন, কাজ করা উচিত:

 <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আপনার মডিউলটি আমদানি করতেও মনে রাখবেন ।

আপডেট 2

এখন, কৌণিক v4 এর পরে আপনি routerLinkনীচে মত সরাসরি বোতামে (চিহ্ন দ্বারা @ চিহ্ন দ্বারা উল্লিখিত) বৈশিষ্ট্য যুক্ত করতে পারেন -

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

Comments

আমি কি এর সাথে কিছু তথ্য পাঠাতে পারি?

— অনুজ

এটি লিখিত হওয়ার পরে জিনিসগুলি পরিবর্তিত হয়েছে কিনা তা নিশ্চিত নন, তবে অক্টোবর 2018 পর্যন্ত মনে হচ্ছে আপনি [routerLink]সরাসরি এট্রিবিউটটি সরাসরি রেখে দিতে পারেন <button>(যা স্টাইলের কিছু সমস্যা এড়ানো যায় যা বোতামটি মোড়ানো অবস্থায় ক্রপ হতে পারে <a>)

— মার্ক অ্যাডেলসবার্গার

তাহলে কোন উপায়টি সবচেয়ে পরিষ্কার? মার্কআপে রুটটি উন্মুক্ত না করে টাইপস্ক্রিপ্ট ফাইলের বদলে রাখাই ভাল, বা [routerLink]টেমপ্লেটের সাথে 'নতুন' পথটি কীভাবে চলবে?

— রিন এবং লেন

আইএমও, এটি আপনার উপর নির্ভর করে আপনি যখন টেক্সটটিতে আপনার মার্কআপটি লুকিয়ে রাখবেন তখন কোনও যুক্তি নেই কারণ আপনি ব্যবহারকারীর নেভিগেট করতে চলেছেন পরের পৃষ্ঠায়। বাকি দুটিই আমার অনুমান

— পারদ্বীপ জৈন

html fileউপাদানটি লোড করা হবে এমন প্রথম স্তরে <router-outlet></router-outlet>ট্যাগ থাকতে হবে। আরও তথ্যের জন্য অনুগ্রহ করে কৌণিক.আইও / এপি / রউটার / রাউটারআউটলেট# বিবরণ দেখুন।

— থারুশা

Answer 2

আপনি নিম্নলিখিত পদ্ধতিতে রাউটারলিঙ্ক ব্যবহার করতে পারেন,

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

বা <button [routerLink]="['./url']">আপনার ক্ষেত্রে ব্যবহার করুন, আরও তথ্যের জন্য আপনি গিথুব https://github.com/angular/angular/issues/9471 এ পুরো স্ট্যাকট্রেসটি পড়তে পারেন

অন্যান্য পদ্ধতিগুলিও সঠিক তবে তারা উপাদান ফাইলে একটি নির্ভরতা তৈরি করে।

আপনার উদ্বেগ সমাধান হয়েছে আশা করি।

Comments

@ রনিত কেন শুধু নয়: <বোতামের টাইপ = "বাটন" মান = "বাল্ক অনুসন্ধান জিজ্ঞাসা করুন" রাউটারলিঙ্ক = "../ অ্যাডবুলকইনকুইরি" ক্লাস = "বিটিএন">? আপনি বর্গাকার বন্ধনী ব্যবহার করছেন কেন?

— অ্যান্ডি কিং

@ অ্যান্ডিকিং যেহেতু তিনি একটি এক্সপ্রেশন ব্যবহার করছেন (মান হিসাবে একটি অ্যারে), foo="boo" তা পছন্দ [foo]="'boo'"। হতে পারে আপনি পড়তে চান stackoverflow.com/questions/43633452/...

— PhoneixS

আমি এই উত্তরটি পছন্দ করি

— হাংএনএম 2

Answer 3

 <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']);
};

Comments

আমি প্রথমে এরকম কিছু করেছি (রাউটার.নভিগেট ব্যবহার করে), তারপরে অন্যান্য ধারণাগুলি সন্ধান করেছি এবং অন্যান্য উত্তরগুলিতে উল্লিখিত রাউটারলিঙ্কটি এখন ব্যবহার করেছি। আমি ভাবছি কোনটি ভাল, বা যদি তা গুরুত্বপূর্ণ হয় ...

— স্কট

Answer 4

আপনি রাউটারের লিঙ্কটি সাজাতে এবং বর্গাকার বন্ধনীর সাথে লিঙ্কটি নীচে গুরুত্বপূর্ণ:

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

এই ক্ষেত্রে " / পরিষেবা " হ'ল রাউটিং উপাদানগুলিতে নির্দিষ্ট করা url URL।

Answer 5

বোতামে রাউটারের লিঙ্কটি থাকা আমার পক্ষে ভাল কাজ করে বলে মনে হচ্ছে:

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

Answer 6

তুমি বদলাতে পারো

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

বেলো মত কনস্ট্রাক্টরের উপাদান স্তরে

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

Answer 7

এই পদক্ষেপগুলি অনুসরণ করুন

আপনার মূল উপাদানটিতে আমদানি যুক্ত করুন

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 } 
];

শুভকামনা।