112

Saya mencoba menavigasi ke halaman lain dengan mengklik tombol tetapi gagal berfungsi. Apa masalahnya. Saya sekarang belajar sudut 2 dan itu agak sulit bagi saya sekarang.

//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 Liska Liskor
sumber

1

coba sesuatu seperti ini:<button class="btn btn-success pull-right" ><a [routerLink]="[ '.', 'Service/Sign_in' ]"> Add Customer</a></button>

Avnesh Shakya

253

Gunakan seperti ini, harus bekerja:

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

Anda juga bisa menggunakan router.navigateByUrl('..')seperti ini:

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

Memperbarui

Anda harus menginjeksi Routerkonstruktor seperti ini:

constructor(private router: Router) { }

hanya dengan begitu Anda dapat menggunakan this.router. Ingat juga untuk mengimpor RouterModulemodul Anda.

Perbarui 2

Sekarang, After Angular v4 Anda dapat langsung menambahkan routerLinkatribut pada tombol (Seperti yang disebutkan oleh @mark di bagian komentar) seperti di bawah ini -

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

Pardeep Jain
sumber

2

dapatkah saya mengirim beberapa data dengannya?

Anuj

12

Tidak yakin apakah ada hal-hal yang berubah sejak ini ditulis, tetapi mulai Oktober 2018, tampaknya Anda dapat langsung meletakkan [routerLink]atribut tersebut di <button>(yang menghindari beberapa masalah gaya yang dapat muncul saat membungkus tombol <a>)

Mark Adelsberger

Jadi, mana yang paling bersih? Apakah lebih baik untuk tidak mengekspos rute dalam markup tetapi menyimpannya dalam file skrip ketikan, atau apakah cara 'baru' [routerLink]dalam template harus dilakukan?

Rin dan Len

terserah Anda, IMO, tidak ada logika untuk menyembunyikan markup Anda di template karena Anda akan menavigasi ke pengguna yang dapat melihat di halaman berikutnya. Istirahat keduanya sama kurasa

Pardeep Jain

1

Pada level pertama html filedimana komponen akan dimuat harus memiliki <router-outlet></router-outlet>tag. silakan lihat angular.io/api/router/RouterOutlet#description untuk detail selengkapnya.

Tharusha

36

Anda dapat menggunakan routerLink dengan cara berikut,

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

atau gunakan <button [routerLink]="['./url']">dalam kasus Anda, untuk info lebih lanjut Anda dapat membaca seluruh stacktrace di github https://github.com/angular/angular/issues/9471

metode lain juga benar tetapi mereka membuat ketergantungan pada file komponen.

Semoga kekhawatiran Anda teratasi.

Ronit Oommen
sumber

1

@Ronit Mengapa tidak hanya: <button type = "button" value = "Add Bulk Inquiry" routerLink = "../ addBulkEnquiry" class = "btn">? Mengapa Anda menggunakan tanda kurung siku?

Andy King

1

@AndyKing Karena dia menggunakan ekspresi (array sebagai nilai), foo="boo" itu seperti [foo]="'boo'". Mungkin Anda ingin membaca stackoverflow.com/questions/43633452/…

PhoneixS

1

Saya lebih suka jawaban ini

HungNM2

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

Aniket
sumber

Saya melakukan sesuatu yang serupa seperti ini pada awalnya (menggunakan router.navigate), kemudian mencari ide lain, dan sekarang menggunakan routerLink seperti yang disebutkan dalam jawaban lain. Aku ingin tahu mana yang lebih baik, atau apakah itu penting ...

Scott

1

Penting bagi Anda untuk mendekorasi tautan router dan tautan dengan tanda kurung siku sebagai berikut:

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

Di mana " / service " dalam hal ini adalah jalur url yang ditentukan dalam komponen perutean.

Mwiza
sumber

0

Memiliki tautan router di tombol tampaknya berfungsi dengan baik untuk saya:

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

Rob McCabe
sumber

0

kamu bisa berubah

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
di tingkat komponen dalam konstruktor seperti di bawah ini

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

Mad Javad
sumber

0

Ikuti langkah ini

Tambahkan impor di komponen utama Anda

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

Dalam file yang sama tambahkan kode di bawah ini untuk konstruktor dan metode

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

Ini adalah .htmlkode file Anda

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

Dalam app-routing.module.tsfile tambahkan dashboard

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

Semoga berhasil.

Arvind Chourasiya
sumber

Navigasikan ke halaman lain dengan tombol bersudut 2

Jawaban:

Memperbarui

Perbarui 2