RouterLink tidak berfungsi


117

Perutean saya di aplikasi angular2 berfungsi dengan baik. Tetapi saya akan membuat beberapa routeLink berdasarkan ini :

Ini perutean saya:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

Dan inilah link yang saya buat:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

Saya berharap bahwa, ketika saya mengkliknya, itu menavigasi ke komponen yang dihormati, tetapi mereka tidak melakukan apa-apa?


Bisakah kamu mencobanya [routerLink]='[/home']? Versi Angular2 dan versi router apa yang Anda gunakan?
Günter Zöchbauer

itu tidak berhasil. apakah kamu yakin dengan tempat qutation kamu ?? Saya rasa saya menggunakan versi terakhir dari angular2, tetapi saya tidak tahu cara memeriksanya. Saya membuatnya dengan ng baru . dan itu harus diperbarui
Jeff

2
Maaf, seharusnya[routerLink]="['/home']"
Günter Zöchbauer

2
Mungkin Anda lupa menambahkan directives: [ROUTER_DIRECTIVES],metadata komponen Anda. Tanpa itu, Angular tidak akan tahu untuk mengurai routerLinks.
Mark Rajcok

Jawaban:


321

Kode yang Anda tunjukkan di sana benar-benar benar.

Saya menduga bahwa masalah Anda adalah Anda tidak mengimpor RouterModule (di mana RouterLink dideklarasikan) ke dalam modul yang menggunakan template ini.

Saya memiliki masalah serupa dan perlu beberapa waktu untuk menyelesaikannya karena langkah ini tidak disebutkan dalam dokumentasi.

Jadi pergi ke modul yang mendeklarasikan komponen dengan template ini dan tambahkan:

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

lalu tambahkan ke modul impor Anda misalnya

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Seiring dengan memiliki pernyataan impor yang benar, Anda juga memerlukan tempat untuk menampilkan routerLink, yang ada di dalam <router-outlet></router-outlet>elemen, sehingga juga perlu ditempatkan di suatu tempat di markup HTML Anda sehingga router tahu di mana harus menampilkan data itu.


1
Saya pikir begitu dan ya - Anda juga benar dalam kasus saya!
Dhananjay

1
Menambahkan modul Router ke impor saya berhasil, terima kasih!
ENDEESA

1
Bekerja untuk saya. Terima kasih banyak!
TheBosti

20

jangan lupa ini untuk menambahkan ini di bawah ini di template Anda:

<router-outlet></router-outlet>

9

Coba ubah tautan seperti di bawah ini:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Selain itu, tambahkan yang berikut ini di header index.html:

<base href="https://stackoverflow.com/">


5

gunakan seperti ini untuk info lebih lanjut membaca topik ini

<a [routerLink]="['/about']">About this</a>

7
Menurut tautan Anda, routerLinkseharusnya dia bekerja ;-)
Günter Zöchbauer

Ini bekerja untuk "@angular/router": "~3.4.0". Bersulang!
mikeym

2
Ya, notasi braket berfungsi (dan merupakan sintaks yang valid dengan tujuan tertentu), tetapi ini bukan solusi untuk pertanyaan ini.
isherwood

2

Saya sadar pertanyaan ini sudah cukup lama sekarang, dan kemungkinan besar Anda sudah memperbaikinya sekarang, tetapi saya ingin memposting di sini sebagai referensi bagi siapa pun yang menemukan posting ini saat memecahkan masalah ini adalah bahwa hal semacam ini menang Tidak berfungsi jika tag Anchor Anda ada di Index.html. Ini harus ada di salah satu komponen


1

Tautannya salah, Anda harus melakukan ini:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

Anda bisa membaca tutorial ini


1
Notasi braket memiliki tujuan berbeda dan tidak menyelesaikan masalah ini.
isherwood

ini dia! <a [routerLink]="['/home']" routerLinkActive="active"> Home </a> Saya mengikuti tutorial yang meminta saya meletakkan routerLinkActive di tag <li>. ketika saya menempatkannya di <a tag, itu sekarang berfungsi! Terimakasih banyak!!!! ini luar biasa!
Rich P

BTW, saya sudah memiliki semua tag / elemen yang disarankan di tempatnya. Sekarang fitur ini berfungsi (semacam). Saya harus mengikuti sisa tutorial karena saya perhatikan bahwa ketika saya memilih baris lain, meskipun nilai untuk baris yang dipilih sedang diteruskan (saya melihatnya di url) hanya baris pertama yang dirender. Tapi itu akan menjadi topik lain. Sekali lagi terima kasih banyak atas bantuan yang luar biasa ini.
Rich P

Saya tidak tahu mengapa, tetapi ketika saya memasang Bracket, itu berhasil untuk saya, dan saya tidak mengimpor RouterModule di modul aplikasi saya ..
Mulai

1

Saya menggunakan routerlink daripada routerLink .


Saya membuat kesalahan ini dan ini memperbaikinya! Saya juga tidak tahu mengapa Anda mendapat suara negatif (mungkin karena ini bisa jadi komentar atau karena tidak langsung menjawab pertanyaan khusus ini?). Alangkah baiknya jika orang yang downvote itu bisa memberikan alasan kenapa.
JoniVR

1

Bagi siapa pun yang mengalami kesalahan ini setelah memisahkan modul, periksa rute Anda, hal berikut terjadi pada saya:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Pindah { path: '**', redirectTo: 'home' }ke AppRoutingModule Anda:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

1

Ada juga kasus lain yang sesuai dengan situasi ini. Jika di interseptor Anda, Anda membuatnya mengembalikan nilai non Boolean, hasil akhirnya seperti itu.

Misalnya, saya mencoba mengembalikan obj && obj[key]barang. Setelah debugging beberapa saat, kemudian saya menyadari bahwa saya harus mengubahnya menjadi tipe Boolean secara manual seperti Boolean(obj && obj[key])agar klik bisa lewat.



1

Karena mata yang tidak terlalu tajam seperti milik saya, saya hrefmalah routerLinkmelakukan beberapa pencarian untuk mencari tahu #facepalm.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.