角2-获得主动链接第2部分

Question

我知道这个问题已经问了很多次了，我previously asked it too，但我再次问，因为我只是不让这件事起作用。每一种方法都试了两天，但都没有成功。

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

我的引导带：

///<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 {

}

扑克牌-手视图拉入菜单组件：

<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