时间戳

首页 > 解决方案 > 使用 @Output 从子组件更改父变量

angular - 使用 @Output 从子组件更改父变量

问题描述

我想要什么- 当我点击反馈按钮时，应该会打开一个带有取消和提交按钮的反馈表。一旦我点击取消/提交，反馈表应该被关闭。如果我再次点击反馈按钮，反馈表应该会再次打开。

发生了什么- 当我点击反馈按钮时，一个带有取消和提交按钮的反馈表即将出现。一旦我点击取消/提交，反馈表就会关闭。但如果我再次点击反馈按钮，反馈表不会打开。

我所做的 - 我在父组件上有一个按钮，点击调用反馈组件（默认情况下反馈页面将被隐藏），就像这样 -

app.component.html

<button type="button" (click)="showFeedbackForm()">Feedback</button>

<div *ngIf="feedbackForm">
    <app-feedback (onHide)="changeHide($event)"></app-feedback>
</div>

app.component.ts

export class AppComponent {
  name = "Angular";

  feedbackForm = false;

  showFeedbackForm() {
    this.feedbackForm = true;
  }

  changeHide(val: boolean) {
    this.feedbackForm = val;
    console.log("changeHide :: ", this.feedbackForm); // this feedbackForm value is not getting updated.
  }

}

& 反馈组件看起来像这样 -

反馈.component.html

<div *ngIf="feedback"> 
    <form (ngSubmit)="onSubmit()">
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <button type="submit" value="Submit">Submit</button>
        <button type="cancel" value="cancel" (click)="closeFeedback()">Cancel</button>
    </form>
</div>

反馈.component.ts

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

@Component({
  selector: "app-feedback",
  templateUrl: "./feedback.component.html",
  styleUrls: ["./feedback.component.css"]
})
export class FeedbackComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  feedback = true;
  closeFeedback() {
    this.feedback = false;
    this.setHide();
  }

  onSubmit() {
    console.log("onSubmit called");
  }

  @Output() feedbackForm = new EventEmitter<boolean>();
  setHide() {
    this.feedbackForm.emit(false);
  }

}

在第二次点击反馈按钮时，没有调用反馈组件。

我不确定我的做法是否正确。stackblitz 链接在这里。请随时更新。

请帮助/指导我

标签： angular

解决方案

在 app.component.html 中

<app-feedback (feedbackForm)="changeHide($event)"></app-feedback>

唯一的问题是feedback.component.ts out 属性是 this.feedbackForm.emit(false);在您使用时（onHide）。

您应该使用feedbackForm上面给出的作为输出属性。

你只需要改变这条线。 <app-feedback (feedbackForm)="changeHide($event)"></app-feedback>

如果您有任何疑问，请告诉我。

推荐阅读