جافاسكريبت - تحديث قيمة منطقية في المكون الأب من المكون الفرعي في Angular 5

أرغب ببساطة في تحديث قيمة منطقية في مكوني الأب عند النقر على زر في مكوني الابن. لدي مكون ابن يظهر ويختفي من خلال السحب، وأقوم بإخفائه وعرضه بناءً على ngClass ديناميكي. يتم تعيين الفئة بناءً على القيمة المنطقية من الأب. ومع ذلك، عندما أغلق هذا المكون من خلال زر في الابن، أريد تحديث القيمة المنطقية في الأب:

الملف الأساسي للمكون تايب سكريبت:

export class AppComponent implements OnInit   {

  showFlyout: boolean

  constructor() {}

  ngOnInit() {
    this.showFlyout = false;
  }
}

ووحدة html الأصلية:

<main>

  <button (click)="showFlyout = !showFlyout"><i class="fa fa-check"></i>Show Flyout</button>

  {{showFlyout}}

  <app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>

</main>

الطفل مكون تايب سكريبت:

export class ActivateFlyoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  closeActivationFlyout() {
    const flyout = document.getElementById('flyout');
    flyout.classList.remove('active');
  }

}

ومكون الطفل HTML:

<button (click)="closeFlyout()">Close</button>

إليك Stackblitz. يمكنك أن ترى أن النقر على زر الأب يقوم بتبديل الفئة بشكل صحيح، ولكن كيف يمكنني تحديث هذا المتغير البولياني من خلال النقر في العنصر الابن وبالتالي جعل طريقة closeActivationFlyout() غير ضرورية في العنصر الابن؟

الإجابة رقم 1

استخدم @Output() كما ذكر الآخرون، لكنه يحتاج إلى إصدار حدث وعليك أيضًا التحقق من تشغيل الحدث في HTML الرئيسي.

إليك StackBlitz يعمل

في مكون الطفل.

@Output() onCloseClick = new EventEmitter();

closeFlyout() {
  this.onCloseClick.emit();
}

وفي HTML للمكونات الأب.

<app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''" (onCloseClick)="showFlyout = false"></app-child>

يمكنك أيضًا إنشاء دالة في المكون الأب، وتشغيلها مثل (onCloseClick)="doFunction()"

الإجابة رقم 2

يمكنك استخدام ربط البيانات ثنائي الاتجاه لجعله يعمل:

مكون التطبيق :

<app-child id="flyout" [(showFlyoutModel)]="showFlyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>

مكون الطفل :

   import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html'
    })
    export class ChildComponent implements OnInit {
      @Input()
      showFlyoutModel;

      @Output()
      showFlyoutModelChange = new EventEmitter<boolean>();
      constructor() { }

      ngOnInit() {
      }

      closeFlyout() {
        this.showFlyoutModelChange.emit(!this.showFlyoutModel);
      }

    }

https://stackblitz.com/edit/angular-v95emc?file=app%2Fchild-component%2Fchild.component.ts