Maison  >  Questions et réponses  >  le corps du texte

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

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以在模板中使用该值
    }
P粉464208937P粉464208937428 Il y a quelques jours512

répondre à tous(1)je répondrai

  • P粉555682718

    P粉5556827182023-09-11 10:09:44

    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.

    répondre
    0
  • Annulerrépondre