angular - 如何在不相关的组件之间传递数据 angular 10

Question

我想将选择值的 id 传递给另一个不相关的组件

组件 1:

HTML

<select (change)="getSelectedStoreId($event.target.value)">
   <option *ngFor="let store of stores.slice().reverse()" value="{{store.id}}">
      {{store.name}} 
   </option>
</select>

是

storeId: any;
getSelectedStoreId(store: any) {
 this.storeId = store;
}

组件 2:

loadItemByStore(storeId: number) {
   this.service.getItemByStore(storeId).subscribe((res: 
   HttpResponse<Item[]>) => {
   this.data= res.body || [];
  }); 
 }

Answer 1

使用带有 Subject 或 BehaviorSubject 的共享服务，像这样:

// service.ts

@Injectable({
 providedIn: 'root'
})
export class MyService {
 sharedValue$ = new Subject();
}

// component a

@Component({
 ...
})
export class ComponentA implements OnInit {
constructor(private myService: MyService) {
}

ngOnInit() {
 // get data
 this.myService.sharedValue$.subscribe(data => {
  // data will update here upon changes
  console.log(data) // 100
 })
}


}

// component b

@Component({
 ...
})
export class ComponentB implements OnInit {
constructor(private myService: MyService) {
}

ngOnInit() {
 // set data
 this.myService.sharedValue$.next(100)
}


}