RouterLink не работает

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

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

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>

Я ожидаю, что когда я нажму на них, он перейдет к уважаемому компоненту, но они ничего не выполняют?

Ответ 1

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

Я подозреваю, что ваша проблема в том, что вы не импортируете RouterModule (где и объявлен RouterLink) в модуль, который использует этот шаблон.

У меня была похожая проблема, и мне потребовалось некоторое время, чтобы решить ее, поскольку этот шаг не упомянут в документации.

Перейдите в модуль, который объявляет компонент с этим шаблоном, и добавьте:

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

затем добавьте его в свои модули импорта, например

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

Помимо правильных операторов импорта, вам также понадобится место для отображения routerRink, которое находится в элементе <router-outlet></router-outlet>, поэтому его также нужно разместить где-то в разметке HTML, чтобы маршрутизатор знал где отображать эти данные.

Ответ 2

не забудьте добавить это ниже в свой шаблон:

<router-outlet></router-outlet>

Ответ 3

Попробуйте изменить ссылки, как показано ниже:

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

Ответ 4

используйте его, как это для mroe info, прочитайте это topic

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

Ответ 5

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

Ответ 6

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

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

Вы можете прочитать это tutorial