Angular routerLink 不会导航到相应的组件

小编典典

Angular routerLink 不会导航到相应的组件

all

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

我希望，当我单击它们时，它会导航到相应的组件，但它们不执行任何操作？

阅读 121

2022-08-27

共1个答案

小编典典

您在那里显示的代码绝对正确。

我怀疑您的问题是您没有将 RouterModule （这是声明 RouterLink 的位置）导入使用此模板的模块中。

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

因此，转到使用此模板声明组件的模块并添加：

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

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

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

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

2022-08-27