使用routerLink(s)第二次单击组件后,仅更新angular 2服务订阅

我有一个角度2应用程序,它使用服务在组件之间进行通信,父组件具有< router-outlet>以及具有routerLinks的子组件.我正在使用NgClass来更新动画的css类.我添加了服务,以便当我点击其中一个路由器链接时,NgClass会更新,除了更改< router-outlet>输出.但是,我只能在点击routerLinks两次后才能更新NgClass.单击相同的routerLink或不同的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);
    }
}

子组件.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>

我是否需要实现一些生命周期钩子才能使其工作？

2016年8月20日更新

@KrishnrajRana你的意思是？

constructor(private navService: NavService){}

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

我试过了,它仍然有相同的行为.