2016-09-24 20 views
0

Ich versuche, eine einfache Header-Komponente zu erstellen, die ab sofort nur versucht, die ID der Navigation zu drucken, die darin registriert ist, die Subscribe-Methode auf einem BehaviorSubject innerhalb einer verwenden NavService. Der NavService registriert das Nav und ruft die nächste Methode auf dem BehaviorSubject auf. Der Wert wird jedoch nicht an die Header-Komponente übertragen. Alles, was ich bekomme, ist der Anfangswert des BehaviorSubject. Könnten Sie mir bitte sagen, was ich falsch mache?Angular 2 + RxJS BehaviorSubject subscribe Call funktioniert nicht

Header-Komponente:

@Component({ 
    selector: 'my-custom-header', 

    template: ` 
    <div class="container"> 
     This is a header 
     <nav custom-nav-1>Custom Nav 1</nav> 
     <ng-content></ng-content> 
     <div>Number of Nav Registered: {{noOfNav}}</div> 
    </div> 
    `, 
    styles: ['.container { border: 1px solid; }'], 
    providers: [NavService] 
}) 
export class HeaderComponent { 
    title = 'Hello!'; 
    noOfNav = 0; 

    constructor(private navService: NavService) {} 

    ngOnInit() { 
    this.navService._navSubject.subscribe({ 
     next: (id) => { 
     this.noOfNav = id; 
     } 
    }); 
    } 
} 

NavService:

@Injectable() 
export class NavService { 
    public _navSubject: BehaviodSubject = new BehaviorSubject<number>(0); 

    registerNavId(id: number) { 
    this._navSubject.next(id); 
    } 
} 

Nav Richtlinie:

@Component({ 
    selector: '[custom-nav-1]', 
    providers: [NavService] 
}) 
export class NavDirective { 
    constructor(private navService: NavService) {} 

    ngOnInit() { 
    this.navService.registerNavId(1); 
    } 
} 

Plunk: https://plnkr.co/edit/0XEg4rZqrL5RBll3IlPL?p=preview

Antwort

2

Ihre Richtlinie erklärt wird i nkorrekt und es wird nicht in Ihrem Modul deklariert.

Ihre NavDirective Ändern von

@Component({ 
    selector: '[custom-nav-1]', 
}) 

zu

@Directive({ 
    selector: '[custom-nav-1]', 
}) 

und es dann durch

import { NavDirective } from './nav.directive'; // you didn't have this before 
import { NavService } from './nav.service'; // or this 
// other imports here 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    NavDirective // important! 
    ], 
    providers: [NavService], // also important! 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

ich auch zur Verfügung gestellt Ihre NavService in Ihrem AppModule statt Ihrer in Ihrer App-Modul deklarieren Einzelkomponenten. Sie können die Zeile providers: [NavService] aus allen Komponenten, Direktiven und Pipes in Ihrem Modul entfernen, da das Modul sie jetzt bereitstellt.

Here's your plunker modified with my changes.

+0

vielen Dank! das funktioniert. – takeradi

+0

Froh ich könnte helfen :) –

Verwandte Themen