RouterLink не работает

Моя маршрутизация в приложениях angular2 работает хорошо. Но я собираюсь создать routeLink на основе этого :

Вот моя маршрутизация:

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

используйте это так, чтобы получить больше информации прочтите эту тему

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

Я знаю, что этот вопрос уже довольно старый, и вы, скорее всего, его уже исправили, но я хотел бы опубликовать здесь как ссылку для всех, кто найдет этот пост при устранении этой проблемы, заключается в том, что такого рода вещи выиграли не работает, если ваши теги привязки находятся в Index.html. Он должен быть в одном из компонентов

Ссылки неверные, вы должны сделать это:

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

Вы можете прочитать это руководство

Для тех, у кого возникла эта ошибка после разделения модулей, проверьте ваши маршруты, со мной произошло следующее:

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

Я использовал routerlink вместо routerLink .

Есть и другой случай, который подходит к этой ситуации. Если в вашем перехватчике вы заставили его возвращать не логическое значение, конечный результат будет таким.

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

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

1. Объявить компонент на уровне приложения
2. Не запускать в компоненте

Из-за не очень острых глаз, как у меня, hrefвместо этого routerLinkмне потребовалось несколько поисков, чтобы понять это #facepalm.