Как изменить varibale родительского компонента от дочернего компонента

Question

Я новичок в Angular. Я пытаюсь получить доступ / мутировать переменную родительского компонента из дочернего компонента. Я нарисовал небольшую диаграмму, чтобы объяснить мою структуру.

1. Метка 1: родительский компонент, в котором находится переменная (подлежащая мутированию).
2. Метка 2: дочерний компонент который изменит родительскую переменную при событии щелчка.
3. Метка 3: кнопка внутри дочернего элемента, которая будет вызывать изменение.

Я проверил множество решений, таких как:

1. Изменение состояния родительского компонента из дочернего компонента
2. Angular доступ к родительской переменной из дочернего компонента
3. Angular2: переменная / функция родительского класса для доступа к дочернему компоненту

Но я не могу решить свою проблему. Я также создал 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() {
  }
}

Моя настоящая проблема намного сложнее, чем эта. Но я пытался воспроизвести то же самое. Я просто хочу увидеть логику c того, как это делается, тогда я справлюсь с вещами по-своему. Я хочу изменить значение x на true.

Эксперт сказал мне создать сервис. Но проект очень сложный, и я не могу внести в него изменения. Это командный проект. Есть ли быстрое решение или менее болезненное решение? Пожалуйста, поправьте меня, я полностью заблокирован из-за этого. Вот стекблиц .

Answer 1

Проверьте это:

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

Answer 2

Я уже получил свой ответ. Но я попробовал еще один подход. Я думал об этом сам. Пожалуйста, скажите мне, чтобы удалить это, если это не так.

Logi c: вместо прямого попадания значения в родительский компонент или использования sendToparent и this.outputToParent.emit(string);. Я создал собственную функцию-мутатор в родительском компоненте, который затем изменит состояние переменной. И я просто вызываю этот метод из дочернего компонента.

Я получил помощь от:

Angular: вызов функции родительского компонента из дочернего компонента

Вот мой код:

parent.component. html

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

parent.component.ts

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

child.component. html

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

child.component.ts

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

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

Это также работает для меня. С этим подходом я могу сделать гораздо больше других изменений. Все мои юнит-тесты также проходят на Жасмин и Карму.

Вот рабочая демонстрация: Stackblitz

Answer 3

При нажатии кнопки (ИЛИ любое событие) вам необходимо передать значение родительскому компоненту с помощью средства вывода Output.

https://angular.io/guide/component-interaction#parent -listens-for-child-event

Я отредактировал ваш slackblitz, так как вы не выдавали вывод при нажатии кнопки, теперь он работает нормально: https://stackblitz.com/edit/angular-zhpbr8

Answer 4

Отправляя событие с помощью @output и EventEmitter из @ angular / core в дочернем компоненте в родительский, мы можем изменить / изменить значение родительского компонента, вызвав событие из дочернего компонента.

Answer 5

Обмен данными между компонентами в Angular

Проверьте это, раздел «Дочерние к родителю: обмен данными через Output ()» и EventEmitter