RouterLink 无法正常工作

Question

我有一个与 RouterLink 配合使用的应用程序。

这是 应用程序模块 中的 imports 数组：

imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '', component: HomeComponent},
      {path:'contact', component: ContactComponent},
      {path: 'about/:id/:name', component: AboutComponent}
    ])

这是 app.component.html:

<div>
  <a routerLink="" routerLinkActive="active">Home</a>
  <a routerLink="/contact" routerLinkActive="active"> Contact</a>
</div>
<router-outlet></router-outlet>

在主页如果用户点击 关于此用户，它应该被重定向到特定用户的关于页面:

<div>
  <a [routerLink]="['/about', follower.id, follower.name]">About this user { ... </a>
</div>

但是，当应用程序加载时，我在控制台上收到此错误： 无法读取未定义的属性 'id'

你能帮我找出问题所在吗？

Answer 1

按如下方式使用安全导航运算符，

 <a [routerLink]="['/about', follower?.id, follower?.name]">About this user { ... </a>

Answer 2

使用 ? 运算符检查 对象键 是否存在：

<div>
   <a [routerLink]="['/about', follower?.id, follower?.name]">About this user { ... </a>
</div>

RouterLink 无法正常工作

RouterLink does not work properly

routerlink

angular