Angular 11组件向服务传变量失败，报未定义属性错误

你在NavigationService的getSearchResult方法中访问this.categoryComponent.searchResult$时报错，是因为服务里的categoryComponent变量从未被定义或赋值，它是undefined，自然无法读取searchResult$属性。

更关键的是，这种写法违反了Angular的设计原则：服务不应该直接依赖组件实例，这会造成组件和服务的强耦合，不利于代码维护和复用。

正确的思路是由组件主动将搜索结果传递给服务，而不是让服务去“索取”组件的属性。以下是修改后的代码：

修改服务代码 #

import { Injectable, OnDestroy } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { SearchResult } from './your-search-result-type-path'; // 替换为实际类型路径

@Injectable({
  providedIn: 'root'
})
export class NavigationService implements OnDestroy {
    private searchResultSubject = new Subject<SearchResult>();
    public searchResult$: Observable<SearchResult>;
    
    constructor() {
        this.searchResult$ = this.searchResultSubject.asObservable();
    }
    
    // 提供方法让组件传入搜索结果
    public updateSearchResult(result: SearchResult): void {
        this.searchResultSubject.next(result);
    }

    ngOnDestroy(): void {
        this.searchResultSubject.complete(); // 销毁时完成Subject，防止内存泄漏
    }
}

修改组件代码 #

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { SearchResult } from './your-search-result-type-path';
import { NavigationService } from './navigation.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
    public searchResult$: Observable<SearchResult>;
    
    constructor(
        private _navigationService: NavigationService,
    ) {
        super();
    }

    ngOnInit(): void {
        // 订阅组件的searchResult$，当结果更新时同步到服务
        this.searchResult$.subscribe(result => {
            this._navigationService.updateSearchResult(result);
        });
    }
}

• 不要在组件的constructor中调用服务方法：此时组件还未完成初始化，searchResult$可能还没有值，应该在ngOnInit生命周期钩子中处理。
• 记得在服务销毁时调用subject.complete()，避免内存泄漏。
• 如果其他组件需要获取这个搜索结果，只需要订阅服务的searchResult$即可。

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