RouterLink不起作用

Question

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

我希望,当我点击它们时,它会导航到受尊重的组件,但它们不执行任何操作？

Answer 1

你在那里展示的代码绝对正确.

我怀疑你的问题是你没有将RouterModule(这是声明RouterLink的地方)导入到使用这个模板的模块中.

我有类似的问题,我花了一些时间来解决,因为文档中没有提到这一步骤.

所以转到使用此模板声明组件的模块并添加:

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

然后将其添加到您的模块导入中,例如

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

除了拥有正确的import语句之外,您还需要显示该routerLink的位置,该位置在<router-outlet></router-outlet>元素中,因此还需要将其放置在HTML标记中的某个位置,以便路由器知道在哪里显示该数据.

Answer 2

不要忘记在下面的模板中添加以下内容:

<router-outlet></router-outlet>

Answer 3

像这样使用 mroe 信息阅读这个主题

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

Answer 4

对于任何在拆分模块后检查路线时遇到此错误的人，我发生了以下情况：

\n\n

公共路由.module.ts：

\n\n

const routes: Routes = [\n    { path: '', component: HomeComponent },\n    { path: '**', redirectTo: 'home' } // \xe2\x86\x90 This was my mistake\n    { path: 'home', component: HomeComponent },\n    { path: 'privacy-policy', component: PrivacyPolicyComponent },\n    { path: 'credits', component: CreditsComponent },\n    { path: 'contact', component: ContactComponent },\n    { path: 'news', component: NewsComponent },\n    { path: 'presentation', component: PresentationComponent }\n]\n\n@NgModule({\n    imports: [RouterModule.forRoot(routes)],\n    exports: [RouterModule]\n})\nexport class PublicRoutingModule { }\n

\n\n

应用程序路由.module.ts：

\n\n

const routes: Routes = [\n];\n\n@NgModule({\n    imports: [RouterModule.forRoot(routes)],\n    exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n

\n\n

移至{ path: '**', redirectTo: 'home' }您的 AppRoutingModule：

\n\n

公共路由.module.ts：

\n\n

const routes: Routes = [\n    { path: '', component: HomeComponent },\n    { path: 'home', component: HomeComponent },\n    { path: 'privacy-policy', component: PrivacyPolicyComponent },\n    { path: 'credits', component: CreditsComponent },\n    { path: 'contact', component: ContactComponent },\n    { path: 'news', component: NewsComponent },\n    { path: 'presentation', component: PresentationComponent }\n]\n\n@NgModule({\n    imports: [RouterModule.forRoot(routes)],\n    exports: [RouterModule]\n})\nexport class PublicRoutingModule { }\n

\n\n

应用程序路由.module.ts：

\n\n

const routes: Routes = [\n    { path: '**', redirectTo: 'home' }\n];\n\n@NgModule({\n    imports: [RouterModule.forRoot(routes)],\n    exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n

\n

Answer 5

尝试更改以下链接:

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

Answer 6

如果您使用独立组件，请确保将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';
}

Answer 7

我使用 routerlink 而不是routerLink。

Answer 8

我知道这个问题现在已经相当老了，而且你现在很可能已经解决了它，但我想在这里发布，作为在解决这个问题时找到这篇文章的任何人的参考，这种事情会赢如果您的锚标记位于 Index.html 中，则不起作用。它需要位于其中一个组件中