Angular组件间通过Service传值：能否在组件*.js文件而非视图中获取数据？

直接在模板里调用服务的getXXX()方法有个明显问题：Angular的变更检测会频繁触发这些方法调用（比如每次组件渲染、用户交互时），可能带来不必要的性能开销，而且把数据获取逻辑分散在模板里，代码也更难维护。

改成在组件类里处理的步骤很简单，分两种情况来说：

情况1：数据是静态/初始化后不再变化的 #

1. 在组件类中注入你的timeconfirmationafterchangeService服务
2. 定义组件内部属性存储数据
3. 在ngOnInit钩子（组件初始化时）调用服务方法赋值
4. 模板绑定组件自身的属性

组件类代码（以TypeScript为例，Angular默认用TS，JS写法逻辑一致）： #

import { Component, OnInit } from '@angular/core';
import { TimeconfirmationafterchangeService } from './你的服务路径';

@Component({
  selector: '你的父组件选择器',
  templateUrl: './父组件模板路径.html'
})
export class YourParentComponent implements OnInit {
  // 根据实际数据类型定义，比如换成你的接口类型
  institution: any;
  scheduleIntervalContainers: any[];

  // 构造函数注入服务
  constructor(private timeconfirmationafterchangeService: TimeconfirmationafterchangeService) { }

  ngOnInit(): void {
    // 初始化时从服务拿数据
    this.institution = this.timeconfirmationafterchangeService.getInstitution();
    this.scheduleIntervalContainers = this.timeconfirmationafterchangeService.getScheduleContainers();
  }
}

模板代码： #

<app-timeconfirmation 
  [institution]="institution" 
  [scheduleIntervalContainers]="scheduleIntervalContainers"
></app-timeconfirmation>

情况2：数据会动态更新（比如其他组件修改了服务里的数据） #

如果服务中的数据是会变化的，那用Observable+订阅/async管道是更优雅的方案，能自动响应数据变化：

先改造你的服务，用BehaviorSubject存储数据： #

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

@Injectable({ providedIn: 'root' })
export class TimeconfirmationafterchangeService {
  // 用BehaviorSubject存数据，支持订阅和推送更新
  private institutionSubject = new BehaviorSubject<any>(null); // 初始值按需设置
  private scheduleContainersSubject = new BehaviorSubject<any[]>([]);

  // 暴露可观察对象给组件订阅
  institution$ = this.institutionSubject.asObservable();
  scheduleContainers$ = this.scheduleContainersSubject.asObservable();

  // 提供方法更新数据
  setInstitution(data: any) {
    this.institutionSubject.next(data);
  }

  setScheduleContainers(data: any[]) {
    this.scheduleContainersSubject.next(data);
  }

  // 保留get方法供同步获取当前值（可选）
  getInstitution() {
    return this.institutionSubject.value;
  }

  getScheduleContainers() {
    return this.scheduleContainersSubject.value;
  }
}

组件端处理方案： #

方案A：手动订阅（需手动取消订阅防内存泄漏）

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TimeconfirmationafterchangeService } from './你的服务路径';
import { Subscription } from 'rxjs';

@Component({
  selector: '你的父组件选择器',
  templateUrl: './父组件模板路径.html'
})
export class YourParentComponent implements OnInit, OnDestroy {
  institution: any;
  scheduleIntervalContainers: any[];
  // 用Subscription管理所有订阅
  private subs = new Subscription();

  constructor(private timeconfirmationafterchangeService: TimeconfirmationafterchangeService) { }

  ngOnInit(): void {
    // 订阅数据变化，更新组件属性
    this.subs.add(
      this.timeconfirmationafterchangeService.institution$.subscribe(data => {
        this.institution = data;
      })
    );

    this.subs.add(
      this.timeconfirmationafterchangeService.scheduleContainers$.subscribe(data => {
        this.scheduleIntervalContainers = data;
      })
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时取消所有订阅
    this.subs.unsubscribe();
  }
}

方案B：用async管道（更简洁，自动管理订阅）

import { Component } from '@angular/core';
import { TimeconfirmationafterchangeService } from './你的服务路径';
import { Observable } from 'rxjs';

@Component({
  selector: '你的父组件选择器',
  templateUrl: './父组件模板路径.html'
})
export class YourParentComponent {
  // 直接把服务的可观察对象赋值给组件属性
  institution$: Observable<any>;
  scheduleIntervalContainers$: Observable<any[]>;

  constructor(private timeconfirmationafterchangeService: TimeconfirmationafterchangeService) {
    this.institution$ = this.timeconfirmationafterchangeService.institution$;
    this.scheduleIntervalContainers$ = this.timeconfirmationafterchangeService.scheduleContainers$;
  }
}

对应的模板代码：

<app-timeconfirmation 
  [institution]="institution$ | async" 
  [scheduleIntervalContainers]="scheduleIntervalContainers$ | async"
></app-timeconfirmation>

这样改造后，数据获取逻辑都集中在组件类或服务里，模板只负责展示，代码更清晰，也能避免不必要的性能损耗。

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