gpt4 book ai didi

angular - 如何从子组件更改父组件的变量

转载 作者:行者123 更新时间:2023-12-04 12:39:53 25 4
gpt4 key购买 nike

我是 Angular 的新手。我正在尝试从子组件访问/改变父组件的变量。我画了一张小图来解释我的结构。

  1. 标签 1:变量(待变异)所在的父组件。
  2. 标签 2:子组件将在点击事件时更改父组件的变量。
  3. 标签 3:子项中将触发更改的按钮。

enter image description here

我检查了很多解决方案,例如:

  1. Change parent component state from child component
  2. Angular access parent variable from child component
  3. Angular2: child component access parent class variable/function

但我无法解决我的问题。我也创建了一个 stackblitz。请查看我的代码。

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

monthpicker.component.ts

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 的值更改为 true

一位专家告诉我创建一项服务。但是这个项目非常复杂,我无法对其进行更改。这是一个团队项目。是否有任何快速修复或不那么痛苦的解决方案。请纠正我,因为这个我完全被封锁了。这是 stackblitz

最佳答案

检查一下:

https://stackblitz.com/edit/angular-k6fnfk?file=src%2Fapp%2Fmonthpicker%2Fmonthpicker.component.html

您必须将 x 传递给子组件,如下所示:

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

然后在您的 monthpicker(子)组件中:

  @Input() x;

并更改 x 值:

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

关于angular - 如何从子组件更改父组件的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60504332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com