Maison > Questions et réponses > le corps du texte
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粉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
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); } }
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('新值'); } }
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.