傳遞 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
  }