Angular 角度2+；RxJS BehaviorSubject订阅调用不工作

我正在尝试构建一个简单的头部组件，到目前为止，它只是尝试在NavService内的BehaviorSubject上使用subscribe方法打印在其中注册的导航id。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;
      }
    });
  }
}

---

Plunk:

您的指令声明不正确，并且未在模块中声明

将您的导航指令从

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

到

然后在应用程序模块中声明

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

我还在AppModule中提供了导航服务，而不是单个组件。您可以从模块中的所有组件、指令和管道中删除

提供程序：[NavService]

行，因为模块现在正在提供它

---

您的指令声明不正确，并且未在模块中声明

将您的导航指令从

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

到

然后在应用程序模块中声明

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

我还在AppModule中提供了导航服务，而不是单个组件。您可以从模块中的所有组件、指令和管道中删除

提供程序：[NavService]

行，因为模块现在正在提供它

---

很高兴我能帮忙：）很高兴我能帮忙：）

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