RouterLink çalışmıyor

Angular2 uygulamalarındaki rotam iyi çalışıyor. Ama dayalı bazı routeLink yapacağım bu :

İşte rotam:

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

Ve işte yaptığım bağlantılar:

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

Onlara tıkladığımda saygın bileşene gitmesini bekliyorum, ancak hiçbir şey yapmıyorlar mı?

Orada gösterdiğiniz kod kesinlikle doğru.

Sorunun, RouterModule'u (RouterLink'in bildirildiği yer) bu şablonu kullanan modüle aktarmamanızdan şüpheleniyorum.

Benzer bir problemim vardı ve bu adım dokümantasyonda bahsedilmediği için çözmem biraz zaman aldı.

Öyleyse, bu şablonla bileşeni bildiren modüle gidin ve şunu ekleyin:

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

sonra bunu modüllerinize ekleyin, örneğin

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

Doğru içe aktarma ifadelerine sahip olmanın yanı sıra <router-outlet></router-outlet>, yönlendiricinin bu verileri nerede görüntüleyeceğini bilmesi için öğenin içinde bulunan yönlendirici bağlantısının gösterilmesi için bir yere de ihtiyacınız olacaktır.

Bunu şablonunuza eklemek için bunu unutmayın:

<router-outlet></router-outlet>

Bağlantıları aşağıdaki gibi değiştirmeyi deneyin:

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

Ayrıca, index.html başlığına aşağıdakileri ekleyin:

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

mroe bilgisi için böyle kullanın bu konuyu okuyun

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

Bu sorunun şimdiye kadar oldukça eski olduğunun farkındayım ve büyük olasılıkla şimdiye kadar düzelttiniz, ancak bu sorunu giderirken bu gönderiyi bulan herkes için referans olarak buraya göndermek istiyorum, bu tür bir şey kazandı Tutturucu etiketleriniz Index.html'de ise çalışmaz. Bileşenlerden birinde olması gerekiyor

Bağlantılar yanlış, bunu yapmalısınız:

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

Bu öğreticiyi okuyabilirsiniz

RouterLink yerine routerlink kullanıyordum .

Modülleri ayırdıktan sonra bu hatayı yaşayanlar için rotalarınızı kontrol edin, bana aşağıdakiler oldu:

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

{ path: '**', redirectTo: 'home' }AppRoutingModule'ünüze taşıyın :

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

Bu duruma uyan başka bir dava daha var. Önleyicinizde, onu Boolean olmayan bir değer döndürdüyseniz, sonuç şu şekildedir.

Örneğin, obj && obj[key]eşyaları iade etmeye çalıştım . Bir süre hata ayıkladıktan sonra Boolean(obj && obj[key]), tıklamanın geçmesine izin vermek için bunu manuel olarak Boolean türüne dönüştürmem gerektiğini fark ettim .

Çalışma örneğini takiben, saf bileşen durumu için çözüm buldum:

1. Bileşeni uygulama düzeyinde bildirin
2. Do bileşeni içinde init değil

Benimki gibi çok keskin olmayan gözler için, hrefbunun yerine, routerLink#facepalm'i anlamak için birkaç arama yaptım.