Angular中非父子组件间变量传递的简易实现方案咨询

嘿，我来帮你搞定这个问题！首先得说明白为什么你直接导入InputComponent的方式行不通：你导入的是组件的类定义，而不是页面上正在运行、接收用户输入的那个组件实例。Angular里每个组件渲染时都会创建独立的实例，所以你在CalendarComponent里访问的inputtedValuesArray根本不是用户输入的那个数组，自然拿不到数据。

下面给你两种相对简易的方案，比复杂的状态管理要简单太多：

方案一：轻量共享服务（真的没你想的复杂） #

共享服务是Angular官方推荐的组件传值方式，而且可以做得非常轻量，几步就能搞定：

1. 创建一个极简的共享服务：

// shared-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' }) // 全局单例，无需手动在模块注册
export class SharedDataService {
  // 用BehaviorSubject保存数组，初始值为空数组
  private inputValuesSubject = new BehaviorSubject<string[]>([]);
  // 对外暴露可观察对象，让其他组件订阅数据变化
  inputValues$ = this.inputValuesSubject.asObservable();

  // 供InputComponent调用，更新数组数据
  updateInputValues(newValues: string[]) {
    this.inputValuesSubject.next(newValues);
  }
}

2. 在InputComponent中注入服务，更新数据：

// input.ts
import { Component } from '@angular/core';
import { SharedDataService } from '../shared-data.service';

@Component({
  selector: 'app-input',
  templateUrl: './input.html'
})
export class InputComponent { 
  inputtedValuesArray: string[] = [];

  constructor(private sharedDataService: SharedDataService) {}

  // 假设用户输入触发这个方法（比如输入框的change事件绑定）
  onInputUpdated() {
    // 这里写你处理用户输入、更新inputtedValuesArray的逻辑
    // ...
    // 更新共享服务里的数据
    this.sharedDataService.updateInputValues(this.inputtedValuesArray);
  }
}

3. 在CalendarComponent中订阅数据：

// calendar.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedDataService } from '../shared-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.html'
})
export class CalendarComponent implements OnInit, OnDestroy {
  private dataSubscription!: Subscription;
  inputtedValuesArray: string[] = [];

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    // 订阅数据变化，拿到最新的输入数组
    this.dataSubscription = this.sharedDataService.inputValues$.subscribe(values => {
      this.inputtedValuesArray = values;
      // 数据更新时自动调用日历生成方法
      this.generateCalendar();
    });
  }

  generateCalendar() { 
    for (let i of this.inputtedValuesArray) { 
      console.log(i); 
    } 
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.dataSubscription.unsubscribe();
  }
}

这个方案其实非常简洁，核心代码没几行，完全没有你担心的复杂感。

方案二：父组件中转（如果两个组件是兄弟关系） #

如果你的InputComponent和CalendarComponent有共同的父组件，那可以用@Output+@Input的方式中转数据，不需要额外创建服务：

1. 在InputComponent中定义输出事件：

// input.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-input',
  templateUrl: './input.html'
})
export class InputComponent { 
  inputtedValuesArray: string[] = [];
  @Output() valuesUpdated = new EventEmitter<string[]>();

  onInputUpdated() {
    // 处理输入逻辑后，把数组传给父组件
    this.valuesUpdated.emit(this.inputtedValuesArray);
  }
}

2. 父组件模板里接收事件并传递给日历组件：

<!-- parent.component.html -->
<app-input (valuesUpdated)="handleValuesUpdated($event)"></app-input>
<app-calendar [inputValues]="currentInputValues"></app-calendar>

3. 父组件TS逻辑：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  currentInputValues: string[] = [];

  handleValuesUpdated(values: string[]) {
    this.currentInputValues = values;
  }
}

4. 在CalendarComponent中用@Input接收数据：

// calendar.ts
import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.html'
})
export class CalendarComponent implements OnChanges {
  @Input() inputValues: string[] = [];

  ngOnChanges() {
    // 数据变化时自动调用日历生成方法
    this.generateCalendar();
  }

  generateCalendar() { 
    for (let i of this.inputValues) { 
      console.log(i); 
    } 
  }
}

这个方案适合兄弟组件的场景，完全基于Angular的基础特性，也很容易实现。

再啰嗦一句：为什么直接导入组件类不行？ #

你导入的InputComponent是类的“蓝图”，不是实际运行的组件实例。Angular每次渲染组件都会创建一个新的实例，所以你在CalendarComponent里访问的inputtedValuesArray只是类的空属性，和用户输入的那个组件实例里的数组完全没关系，自然拿不到值。

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