RouterLink не працює

Моя маршрутизація в програмах angular2 працює добре. Але я збираюся зробити деякий маршрут Посилання на цьому :

Ось моя маршрутизація:

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

І ось посилання, які я зробив:

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

Я очікую, що коли я натискаю на них, він переходить до поважного компонента, але вони нічого не виконують?

Код, який ви там показуєте, абсолютно правильний.

Я підозрюю, що ваша проблема полягає в тому, що ви не імпортуєте RouterModule (саме там RouterLink оголошено) в модуль, який використовує цей шаблон.

У мене була подібна проблема, і мені знадобився певний час, щоб вирішити, оскільки цей крок не зазначений у документації.

Тому перейдіть до модуля, який оголошує компонент за допомогою цього шаблону та додайте:

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

потім додайте його до імпорту модулів, наприклад

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

Поряд з правильними заявами про імпорт, вам також потрібно буде вказати місце для цього routerLink, яке є в <router-outlet></router-outlet>елементі, так що його також потрібно розмістити десь у вашій розмітці HTML, щоб маршрутизатор знав, де відображати ці дані.

не забувайте це, щоб додати це нижче у свій шаблон:

<router-outlet></router-outlet>

Спробуйте змінити посилання, як показано нижче:

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

Також додайте у заголовку index.html таке:

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

використовуйте його так для інформації про mroe читайте цю тему

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

Посилання неправильні. Ви повинні зробити це:

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

Ви можете прочитати цей підручник

Я використовував routerlink замість routerLink .

Мені відомо, що це питання вже досить давнє, і ви, швидше за все, вирішили це до цього часу, але я хотів би розмістити тут як посилання для тих, хто знайде цю публікацію під час усунення неполадок у тому, що ця річ перемогла Не працює, якщо ваші теги прив’язки знаходяться в Index.html. Він повинен бути в одному з компонентів

Для тих, хто має помилку після розбиття модулів, які перевіряють ваші маршрути, зі мною трапилось таке:

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

Перемістіться { path: '**', redirectTo: 'home' }до свого AppRoutingModule:

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

Існує також інший випадок, який відповідає цій ситуації. Якщо в своєму перехоплювачі ви змусили його повернути не булеве значення, кінцевий результат такий.

Наприклад, я намагався повернути obj && obj[key]речі. Після налагодження на деякий час, то я розумію, що я повинен перетворити це на булевий тип вручну, як Boolean(obj && obj[key])щоб пропустити клацання.

Слідом за робочим зразком я розібрався у випадку чистого компонента:

1. Декларуйте компонент на рівні програми
2. Не вступайте в компонент

Для таких не дуже гострих очей, як у мене, я hrefзамість цього routerLinkвзяв кілька пошуків, щоб зрозуміти, що це #facepalm.