javascript - Hur man skickar ett booleskt värde mellan Angular-komponenter för att växla visning av en stil

Jag har detta formulär som nästan är klart. Nu behöver jag bara skapa ett modalfönster med innehåll och det ska öppnas när man klickar på en knapp som finns inuti en barnkomponent. Modal, å andra sidan, är en del av en föräldrakomponent. Jag behöver kommunicera dem med varandra för att informera föräldern att knappen klickades och att det nu är dags att öppna ett modal. Jag avger ett boolean-event, som är lika med tillståndet för den klickade knappen, men jag får ingen reaktion från föräldern, även om jag har en egenskap som kan bindas utifrån (@Input()). Hur kan jag uppnå en sådan uppgift? Var har jag gjort fel?

Barnkomponentmetod

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

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

Förälders 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>

Egendom av en förälder

export class AppComponent {
  title = 'AwesomeFormTask';

  @Input() clickedState: boolean;

}

Svar #1

Behöver inte använda @Input(). Du kan anropa barns komponent från föräldrakomponent med @Output() och EventEmitter på följande sätt.

child.component.ts

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

formResetClicked: boolean = false;

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

Lyssna på formReseted event från föräldern på följande sätt.

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

Svar #2

Det finns ett problem med hur du hanterade händelsen. @Input kommer att skapa en bindbar egenskap på komponentväljaren. Så använd inte @Input.

Som följande

barnKomponent.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>

föräldrakomponent.ts

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

DEMO

Relaterade artiklar