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

问题描述

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

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() {
  }
}

我的实际问题比这复杂得多。但我试图重现相同的内容。我只是想看看它是如何完成的逻辑，然后我会按照我的方式处理这些事情。我想改变 to 的x值true。

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

标签： angulartypescript

看一下这个：

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

您必须传递x给子组件，如下所示：

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

然后在您的月份选择器（子）组件中：

  @Input() x;

并更改x值：

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

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

问题描述

解决方案

推荐阅读