如何在 Angular 组件之间传递布尔值以切换样式的显示

Question

我的表格快准备好了。现在我只需要制作一个包含内容的模式窗口，它应该通过单击子组件内部的按钮弹出打开。另一方面，模态是父组件的一部分。我需要让他们相互沟通，以便通知家长，按钮已被单击，现在是时候打开模式了。我发出一个布尔事件，它等于单击按钮的状态，但我没有从父级得到任何反应，尽管我有一个可从外部绑定的属性（@Input()）如何实现这样的任务？我哪里弄错了？

子组件方法

  onReset() {
    this.formResetClicked = !this.formResetClicked;

    this.formReseted.emit(this.formResetClicked); }

父级的 HTML

<div class="container">
  <div class="wrapper">
    <div class="slider">
        <app-form-slider class="slider-app"></app-form-slider>
    </div>
    <div class="form" (formReseted)="clickedState = $event">
        <router-outlet></router-outlet>
    </div>
    <div class="modal" [ngStyle]="{display: clickedState ? 'block' : 'none'}">
      <div class="modal__content">
        <div class="modal__content--header">
          <span>&times;</span>
          <p>WARNING!</p>
        </div>
        <div class="modal__content--text">
          <p>If you click 'continue' the all information will be deleted. <br>Close this window if you don't want this to happen.</p>
        </div>
        <div class="modal__content--button">
          <button>Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

父母的财产

export class AppComponent {
  title = 'AwesomeFormTask';

  @Input() clickedState: boolean;

}

Answer 1

不需要使用@Input()。@Output()您可以使用和 来将子组件调用到父组件，EventEmitter如下所示。

子组件.ts

@Output() formReseted = new EventEmitter<boolean>();

formResetClicked: boolean = false;

onReset() {
   this.formResetClicked = !this.formResetClicked;
   this.formReseted.emit(this.formResetClicked); 
}

下面请听家长的讲述。formReseted event

父组件.html

<child (formReseted)="testShowHide($event)"></child>

<p *ngIf="show">Showing the Modal</p>

父组件.ts

show: boolean = false;

  testShowHide(show) {
    this.show = show;
  }

StackBlitz 演示