时间戳

首页 > 解决方案 > Angular：Header 中的事件使用 eventemitter/Observable 更新子组件

angular - Angular：Header 中的事件使用 eventemitter/Observable 更新子组件

问题描述

今天，我尝试做一些看似简单的事情，但我很头疼......

我有一个 Angular APP（版本 9），在我的标题组件中我有一个简单的 Select 对象（使用 ngFor 等）。当这个 Select 的值发生变化时，我需要将新值传递给路由组件，该组件在下面加载。

我试图完全按照本文中的建议做：

[https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular/35568924#35568924]

但不是成功=/

这页纸

我的服务来处理 observable.. 将值传递给孩子：

@Injectable({providedIn: "root" })
export class FranchiseControlService {
    private _navItem = "0";
    navChange$: Observable<string>;
    private _observer: Observer<string>;
    constructor() {
        this.navChange$ = new Observable(observer =>
            this._observer = observer)
    }
  
     // Observable navItem source
     changeNav(number) {
        this._navItem = number;
        this._observer.next(number);
      }
      navItem() {
        return this._navItem;
      }
}

**子组件：（需要获取新值并执行某些操作）**

ngOnInit(): void {
    this.itemF = this._franchiseControl.navItem(); 
    this.subscription = this._franchiseControl.navChange$.subscribe(item =>  this.selectedNavItem(item)); 
    }
  
selectedNavItem(item:any) {
  this.itemF = item;
  alert(this.itemF); 
}

标头（NAV）组件，更新我需要传递给子级的值。我正在展示当用户更改下拉列表中的选定项目时触发的 Select 组件 (Change) 方法：

changeFranchise(value) {
  this.selectedFranchise = value;
  if(this.selectedFranchise.toString() == "19")
    this.selectedFranchise = "0"; 
             
    this._franchiseControl.changeNav(this.selectedFranchise);
  }

测试中，我可以看到 FranchiseServieControl 中的值已正确更新，使用“changeNav”方法中的警报。警报显示值已更改，但子组件从未收到此值。我需要在 Child 中接收这个值并执行一些操作......

我哪里错了？有人可以帮忙，好吗？

标签： angularinputobservableeventemitterbehaviorsubject

解决方案

您可以使用下面的行为主题。当您更改服务文件中的值时，它可能会触发。

@Injectable({providedIn: "root" })
export class FranchiseControlService {
   private _navItem = "0";
   private navChange$: BehaviourSubject<string> = new BehaviourSubject(null);

   // Observable navItem source
   changeNav(number) {
    this._navItem = number;
    return this.navChange$.next(number);
   }

   navItem() {
    return this._navItem;
   }
}

推荐阅读