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

Question

我已经准备好这张表格了。现在我只需要制作一个带有内容的模态 window 并且它应该通过单击 child 组件内部的按钮弹出打开。另一方面，Modal 是 parent 组件的一部分。我需要将它们相互通信，以便通知 parent，按钮已被单击，现在是打开模式的时候了。我发出一个布尔事件，它等于单击按钮的状态，但我没有从 parent 得到任何反应，尽管我有一个属性可从外部绑定（@Input()) 我怎样才能完成这样的任务？我哪里错了？

Child组件方法

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

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

Parent的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 将在组件选择器上创建一个可绑定的属性。所以不要使用 @Input.

childComponent.ts

export class ChildComponent {
  @Output() formReseted = new EventEmitter<boolean>();
  formResetClicked = false;
  public onReset() {
    this.formResetClicked = !this.formResetClicked;
    this.formReseted.emit(this.formResetClicked);
  }
}

parentComponent.html

<app-child (formReseted)="onFormReset($event)"></app-child>

parentComponent.ts

onFormReset(isFormResetClicked) {
   console.log(isFormResetClicked)
}

DEMO

Answer 2

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

child.component.ts

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

formResetClicked: boolean = false;

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

听家长formResetedevent如下

parent.component.html

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

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

parent.component.ts

show: boolean = false;

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

StackBlitz Demo

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

How to pass a boolean value between Angular components for switching display of a style

javascript

components

eventemitter

typescript

angular