Question

我知道这个问题曾被多次询问过，previously asked it too然而我再问一遍，因为我没有让这个问题起作用。 2天尝试了几乎每种方法都没有成功。

所以希望我能得到一个非常简单的版本。

我的引导程序：

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./module/Application/src/Controller/app.component";
import {ROUTER_PROVIDERS} from "angular2/router";

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我有一个菜单组件：

import {Component} from 'angular2/core'; 
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
    selector: 'my-poker-menu',
    templateUrl: './dev/module/poker/view/poker/menu.tpl.html',
    directives:[ROUTER_DIRECTIVES] })

export class PokerMenuComponent {
    router: Router;

    constructor(data: Router) {
        this.router = data;
    }

    isRouteActive(tab): boolean {
        if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
            return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
        }
        return false;
    }


}

此组件的视图：

<ul class="poker-menu">
    <li>
        <a [routerLink]="['PokerHands']">Poker Hands</a> {{isRouteActive([PokerHands])}}
    </li>
    <li>
        <a [routerLink]="['TexasHoldem']">Texas hold'em</a>
    </li>
    <li>
        <a [routerLink]="['Omaha']">Omaha</a>
    </li>
    <li>
        <a [routerLink]="['Stud']">Stud</a>
    </li>
</ul>

此时，我想让{{isRouteActive（[PokerHands]）}}在我进入PokerHands路线时返回true。从那里开始，我将使用ngClass设置li类，这是我在Angular2研究中最容易理解的方法。

上述错误测试时：

console.log(this.router.currentInstruction);

返回“null”，所以目前所有路由都返回为“False”。

我的代码中遗漏了什么？

编辑：

此模块的根组件或基本组件：

poker.component.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {NetworkPokerComponent} from "./network-poker.component";
import {PokerHandsComponent} from "./poker-hands.component";
import {OmahaComponent} from "./omaha.component";
import {TexasHoldemComponent} from "./texas-holdem.component";
import {StudComponent} from "./stud.component";
import {SubMenuComponent} from "./sub-menu.component";
@Component({
    selector: 'my-poker',
    templateUrl: './dev/module/poker/view/poker/poker.tpl.html',
    directives:[ROUTER_DIRECTIVES,SubMenuComponent]
})
@RouteConfig([
    {path:'/network-poker',name:'NetworkPoker',component:NetworkPokerComponent, useAsDefault:true},
    {path:'/poker-hands',name:'PokerHands',component:PokerHandsComponent },
    {path:'/omaha',name:'Omaha',component:OmahaComponent },
    {path:'/texas-holdem',name:'TexasHoldem',component:TexasHoldemComponent },
    {path:'/stud',name:'Stud',component:StudComponent },
])
export class PokerComponent {

}

poker.tpl.html拥有路由器插座

<router-outlet></router-outlet>

例如扑克手组件：

import {Component} from 'angular2/core'; 
import {PokerMenuComponent} from "./poker-menu.component"; 
import {SubMenuComponent} from "./sub-menu.component"; 
import {PokerComponent} from "./poker.component";

@Component({
    selector: 'my-poker-hands',
    templateUrl: './dev/module/poker/view/poker/poker-hands.tpl.html',
    directives:[PokerMenuComponent,SubMenuComponent] })

export class PokerHandsComponent {

}

Poker-hands视图拉入菜单组件：

<section class="page-content poker">
    <div class="container">
        <div class="title-bar">
            <h2 class="title green2">Poker games <span> Poker hands</span></h2>
            <div class="right-nav">
                <my-poker-sub-menu></my-poker-sub-menu>
            </div>
        </div>
        <my-poker-menu></my-poker-menu>
...

Answer 1

这对我有用

  isRouteActive(tab):boolean {
    if (this.router.currentInstruction /*&& this.router.currentInstruction.component.routeData*/) {
      return tab == this.router.currentInstruction.component.routeName;
    }
    return false;
  }

或者如果要检查类型而不是组件名称

return tab == this.router.currentInstruction.component.componentType;

使用

{{isRouteActive('PokerHands')}}

我不知道{{isRouteActive([PokerHands])}}应该做什么。

您无法在模板中引用PokerHands等类型。在我的例子中，我使用了字符串名称。

Plunker example

Angular 2 - 获取活动链接第2部分

1 个答案: