Le titre réécrit est : Transmettre les données du modèle au composant associé, pas à d'autres composants.

Question

Comment transmettre les données du modèle aux composants associés au lieu des composants enfants ou parents sans en créer de nouveaux ?

Mon projet.html

<div *ngFor="let item of items">
 <div *ngFor="let subItem of subItems">
  <div *ngIf="!item.value.length">
   <div class="cloth {{nextAvailableSubItem}}"></div>
  </div>
 </div>
</div>

mon-article.component.ts

this.items = {one: ['redShirt'], two: [], three: [] four: ['whiteShirt', 'blackShirt']}
 this.subItems = ['redShirt', 'blueShirt', 'whiteShirt', 'blackShirt'];

filterItems(item, subItem){
 return nextAvailableSubItem //在redShirt之后应该返回whiteShirt以在模板中使用该值
    }

Answer 1

Une approche courante consiste à utiliser un observable pour partager des données via un service intermédiaire

Comme indiqué ci-dessous

• Service intermédiaire :

import { Injectable } from '@angular/core';
    import { BehaviorSubject, Observable } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class SharedDataService {
      private dataSource = new BehaviorSubject<any>('初始值');
      public data$: Observable<any> = this.dataSource.asObservable();
    
      updateData(newData: any): void {
        this.dataSource.next(newData);
      }
    }

• Premier composant (expéditeur de données) :

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

@Component({
  selector: 'app-first-component',
  template: `...`
})
export class FirstComponent {
  constructor(private sharedDataService: SharedDataService) {}

  updateSharedData(): void {
    this.sharedDataService.updateData('新值');
  }
}

• Deuxième composant (consommateur de données) :

import { Component, OnDestroy } from '@angular/core';
    import { SharedDataService } from './shared-data.service';
    import { Subscription } from 'rxjs';
    
    @Component({
      selector: 'app-second-component',
      template: `...`
    })
    export class SecondComponent implements OnDestroy {
      sharedData: any;
      private subscription: Subscription;
    
      constructor(private sharedDataService: SharedDataService) {
        this.subscription = this.sharedDataService.data$.subscribe(data => {
          this.sharedData = data;
          // 在这里消费数据
        });
      }
    
      ngOnDestroy(): void {
        this.subscription.unsubscribe();
      }
    }

N'oubliez pas de vous désinscrire lorsque le composant consommateur est détruit, sinon cela provoquera une fuite mémoire.