Tajuk yang ditulis semula ialah: Hantar data daripada templat kepada komponen yang berkaitan, bukan kepada komponen lain

Question

Bagaimana untuk menghantar data templat kepada komponen yang berkaitan dan bukannya komponen anak atau ibu bapa tanpa membuat yang baharu?

Projek saya.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>

my-item.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

Pendekatan biasa ialah menggunakan Observable untuk berkongsi data melalui perkhidmatan perantara

Seperti yang ditunjukkan di bawah

• Perkhidmatan perantaraan:

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);
      }
    }

• Komponen pertama (penghantar data):

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('新值');
  }
}

• Komponen kedua (pengguna data):

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();
      }
    }

Jangan lupa untuk berhenti melanggan apabila komponen pengguna dimusnahkan, jika tidak, ia akan menyebabkan kebocoran memori.