更新到Angular2 rc2和Angular2 rc3后,我有错误
“属性'urlTree'在”路由器“类型上不存在”
我的功能
isRouteActive(routePath) {
return this.router.urlTree.contains(this.router.createUrlTree(routePath));
}
如何在angular2 rc3中获取活动链接?
答案 0 :(得分:5)
如果要根据 activeRoute 设置某个元素的样式,可以对该元素使用指令[routerLinkActive]="['your-class-name']"
。
routerLinkActive directive source
旧样式(路由器已弃用):
的 html layout
强>
<li [class.active]="isActive(['Dashboard'])">
<a [routerLink]="['dashboard']"><span class="nav-label">Dashboard</span></a>
</li>
<强> *.ts component
强>
isActive(instruction: any[]): boolean {
return this.router.isRouteActive(this.router.generate(instruction));
}
新样式(路由器版本3.0.0-alpha.7):
的 only html layout needed
强>
<li [routerLinkActive]="['active']">
<a [routerLink]="['dashboard']"><span class="nav-label">Dashboard</span></a>
</li>
答案 1 :(得分:3)
您可能想要使用$('a').click(function() {
var fullLink = $(this).attr('href');
var splittedLink = fullLink.split("?");
var href = splittedLink[0];
var qs = splittedLink[1];
// convert qs to body
var splittedQs = qs.split('&');
var body = {};
for(var key in splittedQs) {
var t = splittedQs[key].split('=');
body[t[0]] = t[1];
}
$.ajax({
type: 'post',
data: body,
url: href,
success: function() { ... }
});
return false; // prevent default
});
ActivatedRoute
答案 2 :(得分:1)
使用路由器3.0.0-beta.2的Angular 2 rc4,指令评论指出:
<a routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/']">HOME</a>
然而,这也有效:
<a [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/']">HOME</a>
如果[routerLinkActiveOptions] =&#34; {exact:true}&#34;省略,当路由处于非活动状态时,不会删除该类。