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

发布于11月18日

我在angular2应用程序中的路由运行良好.但我将根据this制作一些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标记中的某个位置，以便路由知道在哪里显示该数据.

Angular相关问答推荐

如何通过订阅angular在另一个对象中使用一个对象？

使用带有展开/折叠行的mat-table数据显示树状 struct

部署在Tomcat服务器非根路径中的Angular应用程序无法加载资源

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件？

Angular路由不响应子路由的子路由

未在ng bootstrap 模式中设置表单输入

使选项卡与父零部件成一定Angular 激活

为什么动画只触发一次？

FromEvent不工作，本机事件绑定

RXJS拆分返回值，多次调用后重新加入

MAT折叠面板的动态开启和关闭无法工作

对象中的值丢失 angular ngrx

NX MFE Angular 模块联合无法访问远程微前端

Angular 重新渲染仅使用ngrx在表中更改的行

将 html ngModel 值传递给服务Angular

为什么我们需要`ngDoCheck`

Angular @NGRX中这三个点的含义是什么

Angular 应用程序中的语法错误：Unexpected token <

Angular 应用程序必须在新部署后清除缓存

实用课程推荐