RouterLink tidak berfungsi

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?

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.

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

<router-outlet></router-outlet>

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/">

gunakan seperti ini untuk info lebih lanjut membaca topik ini

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

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

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

Saya menggunakan routerlink daripada routerLink .

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 { }

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.

Mengikuti contoh kerja , saya telah menemukan solusi untuk kasus komponen murni:

1. Deklarasikan komponen di tingkat aplikasi
2. Jangan init dalam komponen

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