Angular 如何更改父组件'；从子组件中删除变量

我是新手。我试图从子组件访问/变异父组件的变量。我画了一个小图表来解释我的结构

标签1：变量（待变异）所在的父组件

标签2：将在单击事件时更改父变量的子组件

标签3：子系统中触发更改的按钮

我检查了许多解决方案，如：

但我无法解决我的问题。我还创建了一个。请看一下我的代码

timeselector.component.ts

import { Component, ViewChild } from '@angular/core';
import { MonthpickerComponent } from '../monthpicker/monthpicker.component';

@Component({
    ...
})
export class TimeselectorComponent {

    x : boolean=false;

    @ViewChild('primaryMonthPicker', {static: false}) primaryMonthPicker: MonthpickerComponent;

    recievedFromChild:string="Intentionally left blank";

    GetOutputVal($event) {
        this.recievedFromChild=$event;
    }
}

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

@Component({
    ...
})
export class MonthpickerComponent {

  @Output() outputToParent = new EventEmitter<string>();

  constructor() {}

  sendToParent(string:string) {
    this.outputToParent.emit(string);
  }

  buttonClicked() {
    // some logic to access and change timeselector's x
    console.log("Change handler called");
  }

  ngOnInit() {
  }
}

x : boolean=false;
...
parentFun(){
  this.x=true;
}

@Output("parentFun") parentFun: EventEmitter<any> = new EventEmitter();
....

buttonClicked() {
  this.parentFun.emit();
}

monthpicker.component.ts

import { Component, ViewChild } from '@angular/core';
import { MonthpickerComponent } from '../monthpicker/monthpicker.component';

@Component({
    ...
})
export class TimeselectorComponent {

    x : boolean=false;

    @ViewChild('primaryMonthPicker', {static: false}) primaryMonthPicker: MonthpickerComponent;

    recievedFromChild:string="Intentionally left blank";

    GetOutputVal($event) {
        this.recievedFromChild=$event;
    }
}

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

@Component({
    ...
})
export class MonthpickerComponent {

  @Output() outputToParent = new EventEmitter<string>();

  constructor() {}

  sendToParent(string:string) {
    this.outputToParent.emit(string);
  }

  buttonClicked() {
    // some logic to access and change timeselector's x
    console.log("Change handler called");
  }

  ngOnInit() {
  }
}

x : boolean=false;
...
parentFun(){
  this.x=true;
}

@Output("parentFun") parentFun: EventEmitter<any> = new EventEmitter();
....

buttonClicked() {
  this.parentFun.emit();
}

从'@angular/core'导入{Component，EventEmitter，Output}；
@组成部分({
...
})
导出类MonthpickerComponent{
@Output（）outputToParent=neweventemitter（）；
构造函数（）{}
sendToParent（字符串：字符串）{
this.outputOparent.emit（字符串）；
}
按钮点击（）{
//访问和更改timeselector的x的一些逻辑
log（“调用更改处理程序”）；
}
恩戈尼尼特（）{
}
}

我的实际问题远比这复杂。但我试图复制同样的东西。我只想看看它是如何完成的，然后我会按照我的方式处理事情。我想将

x

的值更改为

true

一位专家告诉我创建一个服务。但是这个项目非常复杂，我不能对它进行修改。这是一个团队项目。有没有什么快速的解决办法或不那么痛苦的解决办法。请纠正我，因为这个我完全被封锁了。这是您的答案。

请查看：

您必须将

x

传递给子组件，如下所示：

<app-monthpicker [x]="x" (outputToParent)="GetOutputVal($event)"></app-monthpicker>

要更改

x

值：

 sendToParent() {
    let newX = this.x + 1;
    this.outputToParent.emit(newX);
  }

单击按钮（或任何事件）时，需要使用输出装饰器将值发送到父组件

我编辑了您的slackblitz，因为您没有在单击按钮时发出输出，现在它工作正常：

---

检查这一点，子组件到父组件：通过Output（）和EventEmitter部分共享数据

在子组件到父组件中使用@Output和EventEmitter从@angular/core发出事件，我们可以通过从子组件触发事件来更改/修改父组件值。

我已经得到了答案。但我又尝试了一种方法。我自己想到的。如果这是错误的，请告诉我删除它

逻辑：而不是直接命中父组件中的值或使用

sendToparent

和

this.outputOparent.emit（字符串）。我在父组件本身中创建了一个自定义mutator函数，它将更改变量的状态。我只是从子组件调用该方法

我得到了以下方面的帮助：


这是我的密码：

parent.component.html

<app-child (parentFun)="parentFun()"></app-child>

<button (click)="buttonClicked()">Mutate</button>

child.component.html

<app-child (parentFun)="parentFun()"></app-child>

<button (click)="buttonClicked()">Mutate</button>

变异

子组件.ts

import { Component, ViewChild } from '@angular/core';
import { MonthpickerComponent } from '../monthpicker/monthpicker.component';

@Component({
    ...
})
export class TimeselectorComponent {

    x : boolean=false;

    @ViewChild('primaryMonthPicker', {static: false}) primaryMonthPicker: MonthpickerComponent;

    recievedFromChild:string="Intentionally left blank";

    GetOutputVal($event) {
        this.recievedFromChild=$event;
    }
}

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

@Component({
    ...
})
export class MonthpickerComponent {

  @Output() outputToParent = new EventEmitter<string>();

  constructor() {}

  sendToParent(string:string) {
    this.outputToParent.emit(string);
  }

  buttonClicked() {
    // some logic to access and change timeselector's x
    console.log("Change handler called");
  }

  ngOnInit() {
  }
}

x : boolean=false;
...
parentFun(){
  this.x=true;
}

@Output("parentFun") parentFun: EventEmitter<any> = new EventEmitter();
....

buttonClicked() {
  this.parentFun.emit();
}

@Output（“parentFun”）parentFun:EventEmitter
我将很快尝试一下。请给我5分钟，这很好用。但是，先生，很抱歉，我在提出问题时犯了一个错误。实际场景中的变量是
布尔型
类型，默认情况下为
false
。您能告诉我如何通过相同的机制将其设置为
true
。@Tanzeel当然，请检查：我也改变了我的问题。让我试试你的新办法。谢谢：-）哦。现在我意识到了。我的代码中已经有一个
sendToParent
。这是这样的：
sendToParent（string:string）{this.outputOparent.emit（string）；}
对于您的代码，您必须在子级中调用
emit
函数，以获取父级ts文件中从子级向父级发出的值，例如：在代码中，您需要调用此行
this.outputOparent.emit（string）
在click函数中
buttonClicked（）
每次单击子模板中的按钮时都会调用该函数试试这个
buttonClicked（）{this.sendToParent（“从子组件发送的字符串”）；}
我想你忘了调用sendToParent函数我没有否决你的答案。事实上，我正在阅读你分享的链接。我感谢大家的帮助。：-）我在问谁曾经这样做过。很乐意帮忙，但我的情况不同。My
this.outputToParent.emit（字符串）已在某些逻辑后发出某些字符串。你能不能建议一些其他的方法。有没有其他方法可以让我找到父组件的特定值。你不必发出字符串，你也可以发出一个对象@Output（）outputToParent=neweventemitter（）；而不是在这里提供类型。最好创建一个接口that@BartoszTermena好的，先生，谢谢你提醒。我也把它添加到了答案中。