2016-07-16 3 views
2

У меня есть компонент, который app.component.ts шаблон содержит несколько вкладок компонентов, каждый из которых содержит определенную ссылку:Получить логическое значение, указывающее, какой маршрут активен [Угловое 2]

app.component.html:

<h1>Tabs container</h1> 
<div> 
    <nav> 
     <tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link" (eventEmitter)="closeTabEvent($event)"></tab> 
    </nav>  
</div> 
<div> 
    <router-outlet></router-outlet> 
</div> 

HTML-шаблон вкладки компонента tab.component.html:

<a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a> 
<button *ngIf="tabIndex > 0" (click)="closeTab('tabToCloseKey')">Close tab</button> 

Я ищу способ, чтобы получить логическое значение внутри моего класса TabComponent, указывающий, какой маршрут является активным.

Вот мой TabComponent класс:

export class TabComponent implements OnInit { 
    @Input() name: string; 
    @Input() link: string; 
    @Input() param: string; 
    targetArray: Array<any>; 
    @Output() eventEmitter = new EventEmitter<[number, boolean]>(); 
    // @Output() isActiveEmitter = new EventEmitter<boolean>(); 
    static lastTabIndex: number = 0; 
    tabIndex: number = 0; 
    isActive: boolean = true; 
    // @ViewChild('routerLinkActive') a; 
    // el: HTMLElement; 
    // className: string; 

    constructor(private router: Router, private sharedService: SharedService, private _elRef: ElementRef) {} 

    ngOnInit() { 
     // this.className = this._elRef.nativeElement.find('a').className; 
     // this.className = this.el.className; 
     this.tabIndex = TabComponent.lastTabIndex; 
     // console.log(this.className); 
     TabComponent.lastTabIndex++;   
    } 

    closeTab(){ 
     console.log('tab closed at index: ' + this.tabIndex); 
     let tuple: [number, boolean]; 
     tuple = [this.tabIndex, this.isActive]; 
     this.eventEmitter.emit(tuple); 
     this.hideTabComponent(); 
    } 

    hideTabComponent(){ 
     console.log('Hiding component'); 
    } 
} 

Я хотел бы хранить информацию, указывающую, если маршрут, соответствующий вкладке активен или нет в IsActive булевого атрибута этого машинопись класса.

ответ

1

Вы можете использовать маршрут из параметров в routerLink в ссылке вкладки, так что вы можете поймать это значение в классе с ActivatedRoute, как указано в Angular doc:

Смежные вопросы