routerLink 在显示组件时不总是起作用吗？

Question

我目前正在使用新的 AnalogJS，并且我向一个组件添加了一个 routerLink，该组件接受角色（字符串），该角色可以是设计者/创建者。该路由接受角色参数，组件访问该参数以获取字符串值。但routerLink总是不起作用。除非我重新加载页面。超级奇怪。

<a [routerLink]="['/signup/creator']" class="flex-1 my-6">
  <div class="mx-auto">
    ...
  </div>
</a>

我也添加了 RouterLink 来导入

@Component({
  selector: "app-signuprole",
  standalone: true,
  imports: [HeaderComponent, FooterComponent, RouterModule, RouterLink],
  templateUrl: "./(layouts)/signuprole.page.html",
})

我尝试通过将 Router 添加到构造函数中来使用它，如下所示。

constructor(private router: Router) { }

navigateToSignup(role: string) {
  this.router.navigate(["/signup", role]);
}

我添加了点击功能而不是 routerLink='...'，但它并没有正常工作。

更新： window.location.href = '...'。总是有效！但这对于 AnalogJS 来说不是很可怕吗

Answer 1

只需稍微修改一下模板里面的

[routerLink]

值，在传递动态路段时使用逗号即可（

:role

）：

signuprole.page.html：

<a [routerLink]="['/signup', role]" class="flex-1 my-6">
  <div class="mx-auto">
    ...
  </div>
</a>

signuprole.component.ts：

import { Component } from '@angular/core';

    @Component({
      selector: "app-signuprole",
      standalone: true,
      imports: [HeaderComponent, FooterComponent, RouterModule, RouterLink],
      templateUrl: "./(layouts)/signuprole.page.html",
    })
    export class SignUpRoleComponent {
      role: string = 'creator'; // set initial role
    }