由网友(恶魔少女)分享简介:我使用router.isActiveRoute确定哪个路线是有效的。在我第一次路线主页链接或菜单链接,路线的变化,但活动类不添加。 活动类在第二次单击添加。I use router.isActiveRoute to determine which route is active.At the first time...
我使用router.isActiveRoute确定哪个路线是有效的。在我第一次路线主页链接
或菜单链接
,路线的变化,但活动类不添加。 活动类
在第二次单击添加。
I use router.isActiveRoute to determine which route is active.
At the first time I route to home link
or menu link
, the route changes but active class isn't added. active class
is added at the second click.
我认为这是angular2路由器指令的错误。请告诉我为什么,以及如何解决它?
I think it's bug of Router directive in angular2. Please tell me why and how to fix it?
app.ts
...
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/components/app.html',
styleUrls: ['app/components/app.css']
})
@RouteConfig([
{ path: '/', component: Home, name: 'Home'},
{ path: '/menu', component: Menu, name: 'Menu'}
])
class AppComponent {
constructor(public router: Router) {
}
isActiveRoutes(routes) {
return this.router.isRouteActive(this.router.generate(routes));
}
}
app.html
<a [routerLink]="['Home']">
<div class="icon-box" [class.active]="isActiveRoutes(['/Home'])">
<i class="icon ion-ios-list-outline"></i>
</div>
</a>
<a [routerLink]="['Menu']">
<div class="icon-box" [class.active]="isActiveRoutes(['/Menu'])">
<i class="icon ion-ios-bookmarks-outline"></i>
</div>
</a>
<router-outlet></router-outlet>
感谢
推荐答案
解决的办法很简单。 system.js脚本标签下方移动angular2-polyfills.js的伎俩。这是一个已知的问题#6140 。有一个演示链接也。
The solution is easy. Moving angular2-polyfills.js below system.js script tag did the trick. This is a known issue #6140. There is a demo link also.
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<ul>
<li>
<a [routerLink]="['First']">First</a>
</li>
<li>
<a [routerLink]="['Second']">Second</a>
</li>
<li>
<a [routerLink]="['Third']">Third</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
styles: [".router-link-active { background-color: red; }"],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: "/first", name: "First", component: FirstComponent},
{path: "/second", name: "Second", component: SecondComponent},
{path: "/third", name: "Third", component: ThirdComponent}
])
export class App { }
相关推荐
最新文章