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>
Я ожидаю, что, когда я нажимаю на них, он переходит к уважаемому компоненту, но они ничего не выполняют?
18 ответов
Код, который вы там показываете, абсолютно правильный.
Я подозреваю, что ваша проблема в том, что вы не импортируете 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="/">
Используйте это для mroe info прочитайте эту тему
<a [routerLink]="['/about']">About this</a>
Для тех, у кого возникла эта ошибка после разделения модулей, проверьте ваши маршруты, со мной произошло следующее:
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,RouterLinkActive, иRouterOutletв массив импорта Component.
См. документацию для получения дополнительной информации.
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'routing-app';
}
Я знаю, что этот вопрос к настоящему времени довольно старый, и вы, скорее всего, его уже исправили, но я хотел бы опубликовать здесь как ссылку для всех, кто найдет это сообщение при устранении этой проблемы, заключается в том, что такого рода вещи выиграли не работает, если ваши теги привязки находятся в 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>
Вы можете прочитать этот урок
Есть и другой случай, который подходит к этой ситуации. Если в вашем перехватчике вы заставили его возвращать не логическое значение, конечный результат будет таким.
Например, я пытался вернуть obj && obj[key]прочее. После некоторой отладки я понимаю, что мне нужно вручную преобразовать это в логический тип, напримерBoolean(obj && obj[key]) чтобы пропустить щелчок.
Для не очень острых глаз, как у меня, href вместо того routerLink, мне потребовалось несколько поисков, чтобы выяснить это #facepalm.
В большинстве случаев проблема связана с орфографической ошибкой в
<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
Просто проверьте еще раз на орфографию.
Следуя рабочему образцу, я нашел решение для случая чистого компонента:
В моем случае в моем VS-коде была строка-оболочка, и, по-видимому, не было пробела между концом закрывающей кавычки, принадлежащей [routerLink], и атрибутом next. Line-wrapper разделил это на две строки, поэтому недостающее пространство осталось незамеченным.
Если у вас есть панель навигации внутри компонента и вы объявили свой стиль активным в этой таблице стилей, это не сработает. В моем случае это была проблема.
мой элемент моей навигационной панели с использованием углового материала был:
<div class="nav-item">
<a routerLink="/test" routerLinkActive="active">
<mat-icon>monetization_on</mat-icon>My link
</a>
<mat-divider class="nav-divider" [vertical]="true"></mat-divider>
поэтому я поместил этот стиль в свой style.scss в корень
a.active {
color: white !important;
mat-icon {
color: white !important;
}
}
Надеюсь, это поможет вам, если другие решения не помогли.
Попробуйте добавить созданные вами компоненты в массив объявлений в app.module.ts или соответствующий файл модуля, чтобы ваш модуль знал, что вы создали эти компоненты. Также не забудьте импортировать CommonModule и RouterModule.
import {AboutComponent} from './about.component';
import {FormComponent} from './form.component';
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [FormComponent, AboutComponent]
})
export class MyTemplatesModule { }
Мне удалось решить свою проблему, переместив свои навигационные ссылки со страницы индекса на компонент (на самом деле я добавил шаблон в index.html)
Если вы следуете учебнику https://angular.io/start/start-routing при использовании https://stackblitz.com/ в качестве онлайн-IDE, открытие/обновление его в новом окне исправило это.