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

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

发生了什么事-当我点击“反馈”按钮时，一张带有“取消并提交”按钮的反馈表出现了。单击“取消/提交”后，反馈表将关闭。但如果我再次单击“反馈”按钮，反馈表单将不会打开。

我所做的- 我在父组件上有一个按钮&单击调用反馈组件（默认情况下，将隐藏反馈页面），如下所示-

app.component.html

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

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

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

&反馈组件如下所示-

feedback.component.html

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

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

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

名字：



姓氏：



提交
取消

反馈.组件.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.
  }

}

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);
  }

}

import{Component，OnInit，Output，EventEmitter}来自“@angular/core”；
@组成部分({
选择器：“应用程序反馈”，
templateUrl:“./feedback.component.html”，
样式URL:[“/feedback.component.css”]
})
导出类反馈组件实现OnInit{
构造函数（）{}
ngOnInit（）{}
反馈=正确；
closeFeedback（）{
这个反馈=错误；
这个.setHide（）；
}
onSubmit（）{
log（“被调用的onSubmit”）；
}
@Output（）feedbackForm=neweventemitter（）；
setHide（）{
this.feedbackForm.emit（false）；
}
}

第二次点击反馈按钮时，反馈组件不会被调用

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

---

请帮助/指导我

对于如此简单的任务，有太多冗余且结构错误的代码。我用提供的代码玩了一会儿。解决方案可能看起来是这样的（一些命名必须是固定的，但我保持原样）：

app.component.ts

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  isVisible = false;

  showFeedbackForm() {
    this.isVisible = true;
  }

  changeHide() {
    this.isVisible = false;
  }
}

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

@Component({
  selector: "app-feedback",
  templateUrl: "./feedback.component.html",
  styleUrls: ["./feedback.component.css"]
})
export class FeedbackComponent {
  @Output() close = new EventEmitter<void>();

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

  closeFeedback() {
    this.close.emit();
  }
}

app.component.html

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>

反馈

feedback.component.ts

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  isVisible = false;

  showFeedbackForm() {
    this.isVisible = true;
  }

  changeHide() {
    this.isVisible = false;
  }
}

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

@Component({
  selector: "app-feedback",
  templateUrl: "./feedback.component.html",
  styleUrls: ["./feedback.component.css"]
})
export class FeedbackComponent {
  @Output() close = new EventEmitter<void>();

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

  closeFeedback() {
    this.close.emit();
  }
}

从“@angular/core”导入{Component，Output，EventEmitter}；
@组成部分({
选择器：“应用程序反馈”，
templateUrl:“./feedback.component.html”，
样式URL:[“/feedback.component.css”]
})
导出类反馈组件{
@Output（）close=neweventemitter（）；
onSubmit（）{
log（“被调用的onSubmit”）；
}
closeFeedback（）{
this.close.emit（）；
}
}

feedback.component.html

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>

反馈有效！

名字：



姓氏：



提交
取消

对于这样一项简单的任务，有太多冗余且结构错误的代码。我用提供的代码玩了一会儿。解决方案可能看起来是这样的（一些命名必须是固定的，但我保持原样）：

app.component.ts

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  isVisible = false;

  showFeedbackForm() {
    this.isVisible = true;
  }

  changeHide() {
    this.isVisible = false;
  }
}

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

@Component({
  selector: "app-feedback",
  templateUrl: "./feedback.component.html",
  styleUrls: ["./feedback.component.css"]
})
export class FeedbackComponent {
  @Output() close = new EventEmitter<void>();

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

  closeFeedback() {
    this.close.emit();
  }
}

app.component.html

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>

反馈

feedback.component.ts

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  isVisible = false;

  showFeedbackForm() {
    this.isVisible = true;
  }

  changeHide() {
    this.isVisible = false;
  }
}

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

@Component({
  selector: "app-feedback",
  templateUrl: "./feedback.component.html",
  styleUrls: ["./feedback.component.css"]
})
export class FeedbackComponent {
  @Output() close = new EventEmitter<void>();

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

  closeFeedback() {
    this.close.emit();
  }
}

从“@angular/core”导入{Component，Output，EventEmitter}；
@组成部分({
选择器：“应用程序反馈”，
templateUrl:“./feedback.component.html”，
样式URL:[“/feedback.component.css”]
})
导出类反馈组件{
@Output（）close=neweventemitter（）；
onSubmit（）{
log（“被调用的onSubmit”）；
}
closeFeedback（）{
this.close.emit（）；
}
}

feedback.component.html

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>

反馈有效！

名字：



姓氏：



提交
取消

在app.component.html中

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>

唯一的问题是in feedback.component.ts out属性是

this.feedbackForm.emit（false）当您使用（onHide）时

您应该使用
feedbackForm
作为上述输出属性

你只要换一行就行了。

如果您有任何疑问，请告诉我。
在app.component.html中

<hello name="{{ name }}"></hello>

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

<div>
    <app-feedback (close)="changeHide()" *ngIf="isVisible"></app-feedback>
</div>

<p>
    feedback works!
</p>
<div> 
    <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>


唯一的问题是in feedback.component.ts out属性是
this.feedbackForm.emit（false）当您使用（onHide）时

您应该使用
feedbackForm
作为上述输出属性

你只要换一行就行了。

如果您有任何疑问，请告诉我。
尝试将输出属性重命名为：
@Output（）onHide=…
。请参阅。尝试将输出属性重命名为：
@Output（）onHide=…
。看见