Angular指令与组件通过Service传值报错：类型不匹配及订阅问题

Let’s walk through your two errors one by one and fix them up:

1. Error: Type 'Transfer' is not assignable to type 'Observer' #

Why this happens #

This error usually comes from mixing up your custom Transfer data type with RxJS's Observer interface. Here’s the most common scenario:

• You’re trying to use a Transfer object directly as an Observer (the thing that subscribes to an Observable), but an Observer requires next(), error(), and complete() methods—your Transfer type doesn’t have these.
• Or, you forgot to define your Observable/Subject with the Transfer type as its generic parameter, so TypeScript thinks you’re assigning a data object to an Observer variable.

Fix steps #

Assuming you’re using a BehaviorSubject (the most common way to share data between components/directives in Angular), here’s the correct service setup:

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs'; // RxJS 6+ import path
import { Transfer } from './your-transfer-file-path'; // Replace with your actual path

@Injectable({ providedIn: 'root' })
export class TransferService {
  // Private Subject: only this service can emit data
  private _transferSubject = new BehaviorSubject<Transfer | null>(null);
  // Public Observable: components/directives can only subscribe to this
  public transfer$: Observable<Transfer | null> = this._transferSubject.asObservable();

  // Method to update the shared data
  setTransferData(transfer: Transfer): void {
    this._transferSubject.next(transfer); // Emit the Transfer data
  }
}

Key fixes here:

• We define the BehaviorSubject with Transfer | null as its generic type (so it knows it emits Transfer objects).
• We use next() to emit the Transfer data—this is the correct way to push data through a Subject, not assigning the Transfer object directly to the Subject/Observer.

2. Error: Property 'subscribe' does not exist on type '() => Observable' #

Why this happens #

This is a simple syntax mistake: you’re trying to call subscribe() on a function that returns an Observable, not on the Observable itself. For example:

• If your service has a method like getTransferData(): Observable<Transfer>, you might have written this.transferService.getTransferData.subscribe(...) (missing parentheses to execute the function).

Fix steps #

Depending on how you set up your service:

Case 1: You’re using a method to return the Observable

Call the method first to get the Observable, then subscribe:

// In your component/directive
import { TransferService } from './transfer.service';

constructor(private transferService: TransferService) {}

ngOnInit(): void {
  // Correct: execute the method to get the Observable, then subscribe
  this.transferService.getTransferData().subscribe((transferData) => {
    console.log('Received transfer data:', transferData);
    // Do something with the data
  });
}

Case 2: You’re exposing the Observable directly as a property

Subscribe directly to the property (no parentheses needed):

// In your component/directive
ngOnInit(): void {
  // Correct: subscribe to the public Observable property
  this.transferService.transfer$.subscribe((transferData) => {
    console.log('Received transfer data:', transferData);
  });
}

Quick Additional Checks #

• RxJS Version: If you’re using Angular 6+, make sure you’re importing from rxjs (not rxjs/Observable or rxjs/BehaviorSubject)—old import paths can cause type mismatches.
• Transfer Type Import: Double-check that your Transfer type is imported correctly in the service (the error snippet shows an incomplete import: import { Transfer } from '...—make sure this points to the right file).

内容的提问来源于stack exchange，提问作者berensn