javascript - How to pass a boolean value between Angular components for switching display of a style - Stack Overflow

admin管理员组

文章数量:1303343

I have this form that is almost ready. Now I only have to make a modal window with content and it should pop open with click on a button which is inside of a child ponent. Modal, on the other hand, is a part of a parent ponent. I need to municate them with each other in order to inform the parent, that the button was clicked and that now it's time to open a modal. I emit a boolean event, which is equal to the state of a clicked button, but I don't get any reaction from the parent, although I have a property bindable from outside (@Input()) How can I achieve such a task? Where am I mistaken?

Child ponent method

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

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

Parent's 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>

Property of a parrent

export class AppComponent {
  title = 'AwesomeFormTask';

  @Input() clickedState: boolean;

}

I have this form that is almost ready. Now I only have to make a modal window with content and it should pop open with click on a button which is inside of a child ponent. Modal, on the other hand, is a part of a parent ponent. I need to municate them with each other in order to inform the parent, that the button was clicked and that now it's time to open a modal. I emit a boolean event, which is equal to the state of a clicked button, but I don't get any reaction from the parent, although I have a property bindable from outside (@Input()) How can I achieve such a task? Where am I mistaken?

Child ponent method

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

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

Parent's 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>

Property of a parrent

export class AppComponent {
  title = 'AwesomeFormTask';

  @Input() clickedState: boolean;

}

• javascript
• angular
• typescript
• ponents
• eventemitter

Share Improve this question Follow edited Dec 6, 2019 at 2:22 Sudarshana Dayananda 5,26522 gold badges2626 silver badges4545 bronze badges asked Dec 4, 2019 at 16:13 Not-a-WhaleNot-a-Whale 9922 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Do not need to use @Input(). You can call child ponent to parent ponent using @Output() and EventEmitter as follows.

child.ponent.ts

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

formResetClicked: boolean = false;

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

Listen to formReseted event from the parent as follows.

parent.ponent.html

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

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

parent.ponent.ts

show: boolean = false;

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

StackBlitz Demo

There is a problem with how you handled the event. @Input will create a bindable property on the ponent selector. So don't use @Input.

Like the following

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

本文标签：