Angular 5中如何通过子组件按钮点击更新父组件布尔值

Got it, let's walk through how to fix this. The key here is using Angular's @Output() event emitter—it's the go-to way for child components to send messages up to their parents, which is exactly what we need to update that showFlyout boolean.

Step 1: Set Up the Child Component to Emit a Close Event #

First, we'll add an output property to the flyout child component. This will let it trigger an event when the close button is clicked, which the parent can listen to.

Child Component TypeScript (flyout.component.ts):

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

@Component({
  selector: 'app-flyout',
  templateUrl: './flyout.component.html',
  styleUrls: ['./flyout.component.css']
})
export class FlyoutComponent {
  // Define an output event the parent will subscribe to
  @Output() closeFlyout = new EventEmitter<void>();

  // Triggered when the close button is clicked
  onCloseButtonClick() {
    this.closeFlyout.emit(); // Send the close signal to the parent
  }
}

Child Component Template (flyout.component.html):

<div class="flyout-content">
  <!-- Your flyout content goes here -->
  <button (click)="onCloseButtonClick()">Close Flyout</button>
</div>

Step 2: Update the Parent Component to Listen for the Event #

Now, we'll bind the child's output event to a parent method that updates the showFlyout boolean. We'll also keep the ngClass binding to control visibility.

Parent Component TypeScript (app.component.ts):

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showFlyout: boolean = false; // Initialize as needed

  constructor() {}

  ngOnInit() {
    // Your existing OnInit logic here
  }

  // Method to handle the close event from the child
  hideFlyout() {
    this.showFlyout = false;
  }
}

Parent Component Template (app.component.html):

<!-- Optional: Button to open the flyout -->
<button (click)="showFlyout = true">Open Flyout</button>

<!-- Render the flyout with dynamic class binding -->
<app-flyout
  [ngClass]="{'flyout-visible': showFlyout, 'flyout-hidden': !showFlyout}"
  (closeFlyout)="hideFlyout()"
></app-flyout>

Step 3: Add CSS for Show/Hide Behavior #

Make sure your styles handle the slide-in/slide-out effect (example):

.flyout-content {
  position: fixed;
  right: 0;
  top: 0;
  width: 320px;
  height: 100vh;
  background: white;
  transition: transform 0.3s ease-in-out;
}

.flyout-hidden {
  transform: translateX(100%); /* Slide off-screen */
}

.flyout-visible {
  transform: translateX(0); /* Slide into view */
}

How This Works #

1. When the child's close button is clicked, it emits the closeFlyout event.
2. The parent component listens to this event via (closeFlyout)="hideFlyout()" in the template.
3. The parent's hideFlyout() method sets showFlyout to false, which updates the ngClass binding and triggers the CSS transition to hide the flyout.

If you ever need to toggle the value instead of just setting it to false, you could emit a boolean from the child—but for a close action, sending a void event and directly setting showFlyout to false is cleaner.

内容的提问来源于stack exchange，提问作者JordanBarber