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

【问题标题】：Angular : Event in Header updates Child component with eventemitter/ObservableAngular：Header 中的事件使用 eventemitter/Observable 更新子组件
【发布时间】：2020-10-24 22:53:33
【问题描述】：

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

我有一个 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); 
}

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

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

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

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

【问题讨论】：

可以粘贴组件代码吗？至少组件的构造函数和onInit

标签： angular input observable eventemitter behaviorsubject

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试使用主题：

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

【讨论】：