代码之家 › 专栏 › 技术社区 › Victor Aurélio

子路由上的RouterLinkActive all false

angular-router angular

Victor Aurélio · 技术社区 · 9 年前

{ path: '', component: LoginSingupComponent,
  children: [
    { path: 'login', component: LoginComponent },
    { path: 'singup', component: SingupComponent },
  ]
},

导航到 /login 或 /singup 工作正常(加载了正确的组件)。

LoginSingupComponent

<nav md-tab-nav-bar class="mb-1">
  <a md-tab-link routerLink="/login" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Entrar {{rla.isActive}}</a>
  <a md-tab-link routerLink="/singup" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Criar uma conta{{rla.isActive}}</a>
</nav>

启用时 /登录 全部的 rla.isActive == false 启用时 /信号 全部的 rla.isActive == true

exact: true

2 回复 | 直到 9 年前

Chandru 9 年前

试着这样做:

<nav md-tab-nav-bar class="mb-1">
    <a md-tab-link [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a md-tab-link [routerLink]="['/login']" routerLinkActive="active">Login</a>
    <a md-tab-link [routerLink]="['/singup']" routerLinkActive="active">Signup</a>
</nav>

Victor Aurélio 9 年前

发现问题。

这是因为我用相同的变量名导出了两个ROINTERLINKACTIVE,这导致了这种奇怪的行为。

<a md-tab-link routerLink="/auth/login" routerLinkActive [active]="rlal.isActive" #rlal="routerLinkActive">Entrar {{rlal.isActive}}</a>
<a md-tab-link routerLink="/auth/singup" routerLinkActive [active]="rlas.isActive" #rlas="routerLinkActive">Criar uma conta{{rlas.isActive}}</a>

解决了问题。

推荐文章

BBaysinger alex · 未调用角度2+路由解析程序

8 年前

Justin · 如何向ActivatedRoute添加段?

8 年前

CodeMan · Angular 2路由导航在新选项卡中运行(使用Angular Router naviagte)

8 年前

roger_that · Angular2:从URL访问查询参数时出错

8 年前

JUNNNN · Angular 5使用Angular Universal从API设置路由

8 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

8 年前

HansMusterWhatElse · 角度-跨不同模块提供防护

8 年前

Wai Yan Hein · 子模块的角度5布线不工作

8 年前

OrdinaryProgrammer · 当我要在URL中传递参数时,读取了错误的URL

8 年前

TheProfiler · 如何保持角航线导航固定?角度路由重定向到新页面

8 年前