angular 2 服务订阅仅在第二次单击带有 routerLink(s) 的组件后更新

Question

Angular 2.0 rc 5，路由器版本 3.0.0 rc1

我有一个 Angular 2 应用程序，它使用服务在组件之间进行通信，父组件具有 <router-outlet>和一个具有 routerLinks 的子组件。我正在使用 NgClass 更新动画的 css 类。除了更改 <router-outlet> 之外，我还添加了该服务，以便在我单击其中一个路由器链接时更新 NgClass。输出。但是，我只能在单击 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);
    }
}

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

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

2016 年 8 月更新

@KrishnrajRana 你是这个意思吗？

constructor(private navService: NavService){}

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

我试过了，它仍然有同样的行为。

Answer 1

啊，这对我来说是一个简单的逻辑错误，我需要一个 false bool 值来让我的类消失，但是我在触发服务方法之前将我的 bool 值切换为 true，因此下一个操作将发送的 bool 值设置为 false，让类(class)消失。

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);  
    }
}