如何无需创建新组件，将模板数据传递至关联组件而非父子组件？

在Angular中，非父子组件间传递数据且不新建组件的话，有两种实用方案：

方案1：共享服务（结合RxJS） #

这是跨组件（包括路由组件、兄弟组件等）传递数据的通用方案，无需依赖组件结构。

步骤： #

1. 创建共享服务
   用RxJS的Subject作为数据传递的桥梁，确保组件间能实时响应数据变化：

   import { Injectable } from '@angular/core';
   import { Subject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class ItemDataService {
     // 私有Subject，只允许服务内部修改
     private availableSubItem$ = new Subject<string>();
     // 公开的Observable，供其他组件订阅
     public availableSubItemObservable = this.availableSubItem$.asObservable();
   
     // 发送数据的方法
     sendAvailableSubItem(item: string) {
       this.availableSubItem$.next(item);
     }
   }
   

2. 在发送数据的组件（my-item）中使用服务
   先修正原代码的语法错误，实现filterItems方法并发送数据：

   // my-item.component.ts
   import { Component } from '@angular/core';
   import { ItemDataService } from './item-data.service';
   
   @Component({
     selector: 'app-my-item',
     templateUrl: './my-item.html'
   })
   export class MyItemComponent {
     items = { 
       one: ['redShirt'], 
       two: [], 
       three: [], 
       four: ['whiteShirt', 'blackShirt'] 
     };
     subItems = ['redShirt', 'blueShirt', 'whiteShirt', 'blackShirt'];
   
     constructor(private itemDataService: ItemDataService) {}
   
     filterItems(): string | undefined {
       // 收集所有已使用的子项
       const usedItems = Object.values(this.items).flat();
       // 找到第一个未被使用的子项
       const nextAvailable = this.subItems.find(sub => !usedItems.includes(sub));
       
       // 发送数据到关联组件
       if (nextAvailable) {
         this.itemDataService.sendAvailableSubItem(nextAvailable);
       }
       return nextAvailable;
     }
   }
   

   修正模板（原items是对象，需用keyvalue管道遍历）：

   <!-- my-item.html -->
   <div *ngFor="let item of items | keyvalue">
     <div *ngFor="let subItem of subItems">
       <div *ngIf="!item.value.length">
         <div class="cloth {{filterItems()}}"></div>
       </div>
     </div>
   </div>
   

3. 在关联组件中接收数据
   注入服务并订阅数据：

   import { Component, OnInit } from '@angular/core';
   import { ItemDataService } from './item-data.service';
   
   @Component({
     selector: 'app-related-component',
     templateUrl: './related-component.html'
   })
   export class RelatedComponent implements OnInit {
     nextAvailableSubItem: string | undefined;
   
     constructor(private itemDataService: ItemDataService) {}
   
     ngOnInit() {
       this.itemDataService.availableSubItemObservable.subscribe(item => {
         this.nextAvailableSubItem = item;
         // 这里可以处理数据，比如更新模板
       });
     }
   }
   

方案2：模板引用变量 + ViewChild（仅适合同一模板下的兄弟组件） #

如果关联组件和my-item组件在同一个父模板中，可以直接通过模板引用变量传递数据，无需服务：

步骤： #

1. 在父模板中给my-item组件加引用变量

   <!-- parent.component.html -->
   <app-my-item #itemComp></app-my-item>
   <!-- 关联组件直接通过输入属性接收数据 -->
   <app-related-component [availableItem]="itemComp.nextAvailableSubItem"></app-related-component>
   

2. 在my-item组件中暴露数据属性

   // my-item.component.ts
   export class MyItemComponent {
     // 公开属性供外部组件访问
     nextAvailableSubItem: string | undefined;
     items = { /* 原数据 */ };
     subItems = [ /* 原数据 */ ];
   
     filterItems(): string | undefined {
       const usedItems = Object.values(this.items).flat();
       this.nextAvailableSubItem = this.subItems.find(sub => !usedItems.includes(sub));
       return this.nextAvailableSubItem;
     }
   }
   

3. 关联组件通过输入属性接收

   // related-component.ts
   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-related-component',
     templateUrl: './related-component.html'
   })
   export class RelatedComponent {
     @Input() availableItem: string | undefined;
   }
   

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