角2服務訂閱僅後部件第二次點擊同routerLink（多個）

Question

角2.0 RC 5，路由器版本3.0.0 RC1更新

我有一個角2的應用程序，使用服務的組件之間進行通信，一個具有<router-outlet>的父組件以及具有routerLink的子組件。我正在使用NgClass來更新動畫的CSS類。我添加了服務，以便NgClass在更改<router-outlet>輸出時單擊其中一個路由器鏈接時進行更新。不過，我只能在點擊兩次routerLinks後才能更新NgClass。點擊相同的routerLink或不同的路由器並不重要，只要點擊兩次訂閱更新即可。

page behavior gif

我父組件的.TS：

import {Component} from '@angular/core'; 
import {NgClass} from '@angular/common'; 
import {NavService} from 'components/nav.service'; 
import {Subscription} from 'rxjs/Subscription'; 
import {ButtonComponent} from 'components/button.component'; 
import {MenuComponent} from 'components/menu.component'; 
import {CardContainerComponent} from 'components/cardcontainer.component'; 

@Component({ 
    selector: 'juan', 
    templateUrl: 'app/components/app.component.html', 
    directives: [ NgClass ,ButtonComponent, MenuComponent, CardContainerComponent], 
    providers: [NavService] 
}) 
export class AppComponent { 
    isPushed = false; 
    subscription: Subscription; 
    public initiatePush(){ 
     this.isPushed = !this.isPushed; 
    } 
    constructor(private navService: NavService){ 
     this.subscription = this. navService.navToggle$.subscribe(
      isPushed => { 
       this.isPushed = isPushed; 
      } 
     ) 
    } 
} 

父組件的.html：

<div class="frame" [ngClass]="{'pushed' : isPushed}"> 

    <div id="o-wrapper" class="o-wrapper"> 
     <div class="menu"> 

     </div> 
     <div class="menu-cover"> 
     </div> 
     <animated-button (triggerer)="initiatePush($event)"></animated-button> 

    </div> 
    <router-outlet></router-outlet> 
    <div class="footer"><p class="credit">by <a href="mailto:juan.asher@gmail.com?Subject=Site%20query" class= "email-link">Juan Asher</a></p></div> 
    <div id="c-mask" class="c-mask" [ngClass]="{'is-active' : isPushed}"></div> 
    <main-menu></main-menu> 
</div> 

服務的.ts：

import {Injectable}   from '@angular/core'; 
import {Subject}  from 'rxjs/Subject'; 

@Injectable() 
export class NavService{ 
    private navToggleSource = new Subject<boolean>(); 
    navToggle$ = this.navToggleSource.asObservable(); 
    toggleNav(isPushed: boolean) { 
     this.navToggleSource.next(isPushed); 
    } 
} 

的C希爾德組件的.ts：

import {Component} from '@angular/core'; 
import {SlidingButtonComponent} from './sliding-button.component'; 
import {NgClass} from '@angular/common'; 
import {NavService} from './nav.service'; 

@Component({ 
    selector: 'main-menu', 
    templateUrl: 'app/components/menu.component.html', 
    directives: [SlidingButtonComponent, NgClass], 
    providers: [] 
}) 
export class MenuComponent { 
    isSlided = false; 
    isClicked = false; 
    public initiateSlide(){ 
     this.isSlided = !this.isSlided; 
    } 
    constructor(private navService: NavService) {} 
    public toggleFocus(){ 
     this.isClicked = !this.isClicked; 
     this.navService.toggleNav(this.isClicked); 
    } 
} 

子組件的.html：

<nav class="c-menu"> 
    <ul class="c-menu__items"> 
     <li class="c-menu__item"><a (click)="toggleFocus()" class="c-menu__link" routerLink="/card-container" routerLinkActive="active">Home</a></li> 
     <li class="c-menu__item"><sliding-button (slider)="initiateSlide($event)"></sliding-button></li> 
    </ul> 
</nav> 
<div class="login-slider" [ngClass]= "{'is-slided' : isSlided}"> 
    <div class="slider-content"> 
     <input type="email" class="input-field" placeholder="Email Address"> 

     <input type="password" class="input-field" placeholder="Password"> 
     <button type="submit" class="button button-block">Login</button> 
    </div> 
    <div class="slider-tab"> 
     <ul class="c-menu__items"> 
      <li class="c-menu__item"><a (click)="toggleFocus()" class="c-menu__link last-item" routerLink="/join" routerLinkActive="active">Join</a></li> 
     </ul> 
    </div> 
</div> 

我需要實現一些生命週期掛鉤，使這項工作？

更新20/08/2016

@KrishnrajRana你說這個？

constructor(private navService: NavService){} 

ngOnInit() { 
    this.subscription = this. navService.navToggle$.subscribe(
     isPushed => { 
      this.isPushed = isPushed; 
     } 
    ) 
} 

我試過了，它仍然有相同的行爲。

Answer 1

這是一個簡單的邏輯錯誤在我的一端，我需要一個假的布爾值使我的課程消失，但是我在觸發服務方法之前將布爾值切換爲true，因此下一個操作將發送的布爾值設置爲false ，使這個階級消失。

export class MenuComponent { 
    isSlided = false; 
    isClicked = false; 
    public initiateSlide(){ 
     this.isSlided = !this.isSlided; 
    } 
    constructor(private navService: NavService) {} 
    public toggleFocus(){ 
     this.isClicked = !this.isClicked; 
     this.navService.toggleNav(this.isClicked); 
    } 
} 

改爲

export class MenuComponent { 
    isSlided = false; 
    isClicked = false; 
    public initiateSlide(){ 
     this.isSlided = !this.isSlided; 
    } 
    constructor(private navService: NavService) {} 
    public toggleFocus(){ 
     this.navService.toggleNav(this.isClicked); 
    } 
}