각도 2 + RxJS BehaviorSubject 구독 호출이 작동하지 않습니다.

Question

지금은 단지 내 안에 BehaviorSubject에 subscribe 메소드를 사용하여 내부에 등록 된 내비게이션의 ID를 인쇄하려고하는 간단한 헤더 구성 요소를 작성하려고합니다. NavService. NavService는 Nav를 등록하고 BehaviorSubject에서 다음 메서드를 호출합니다. 그러나이 값은 헤더 구성 요소로 전송되지 않습니다. 내가 얻은 것은 BehaviorSubject의 초기 값입니다. 내가 잘못하고있는 것을 제발 말해 줄래?

헤더 구성 요소 :

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

탐색 지침 :

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

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

쿵하는 소리 : 귀하의 지시가 내가 https://plnkr.co/edit/0XEg4rZqrL5RBll3IlPL?p=preview

Answer 1

선언되고있다 ncorrectly 그리고 그것은 귀하의 모듈에서 선언되지 않습니다.

내가 또한 대신 AppModule에 NavService을 제공

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

에

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

에서 NavDirective을 변경 한 후

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 { 
} 

하여 응용 프로그램 모듈에서 선언

당신의 개별 구성 요소. 모듈이 이제 모듈을 제공하고 있기 때문에 모듈의 모든 구성 요소, 지시문 및 파이프에서 providers: [NavService] 행을 제거 할 수 있습니다.

Here's your plunker modified with my changes.