传递 boolean 值不会从一个组件共享到另一个组件 - Angular

Question

这只是一个简单的用例，但不要明白我遗漏了什么。

我有 componentA 和 componentB。 使用eventEmitter通过单击事件将布尔值从componentB传递到componentA ，以显示/隐藏 componentA 中的特定 div。

迄今为止

组件B

public showLayOut = false;
@Output() passThisValue = new EventEmitter<boolean>();

ngOnInit(): void {
    this.showLayOut = false;
}

triggerEventToPassBoolVal() {

    this.someService(baseLink).subscribe((data) => {
        if (data[0].status === true) {
            this.showLayOut = true;
            if (this.showLayOut) {
                this.passThisValue.emit(this.showLayOut);
            }
        }
    })
}

组件A.html

<div *ngIf="showLayOut">
   <p>Show this div if emitted value is true, otherwise hide</p>
</div>

谁能帮我指出我做错了什么？如果可能，请分享任何现有的 stackblitz 工作样本

注意：我使用这样的表单来提交数据(ngSubmit)="OK(data)"谢谢

Answer 1

如果componentA是 componentB 的父组件。 我有那个解决方案。 例如：

  import { Component, OnInit, ViewContainerRef } from '@angular/core';
  
  // componentB.compoent.ts

  getParentComponent() {
    return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component;
  }
  
  changeBooleanvalueMethod () {
     this.getParentComponent().showLayOut = true; // showLayOut is componentA variable
  }