无法在angular中使用订阅转移值

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {
  private valueSubject = new BehaviorSubject<string>('');

  setValue(value: string) {
    this.valueSubject.next(value);
  }

  getValue() {
    return this.valueSubject.asObservable();
  }
}

import { Component } from '@angular/core';
import { DataTransferService } from './data-transfer.service';

@Component({
  selector: 'app-sender',
  template: `
    <input [(ngModel)]="value" (ngModelChange)="sendValue()">
  `
})
export class SenderComponent {
  value: string;

  constructor(private dataTransferService: DataTransferService) {}

  sendValue() {
    this.dataTransferService.setValue(this.value);
  }
}

import { Component, OnInit } from '@angular/core';
import { DataTransferService } from './data-transfer.service';

@Component({
  selector: 'app-receiver',
  template: `
    <p>Received value: {{ receivedValue }}</p>
  `
})
export class ReceiverComponent implements OnInit {
  receivedValue: string;

  constructor(private dataTransferService: DataTransferService) {}

  ngOnInit() {
    this.dataTransferService.getValue().subscribe(value => {
      this.receivedValue = value;
    });
  }
}