Получить переменную из Компонента A в Компоненте B, когда она будет переназначена в Angular 9

Question

У меня есть компонент слайдера, который назначает переменную currentSlide каждый раз, когда элементы слайдера перемещаются. Это выглядит так:

export class CarouselComponent implements OnInit {

  currentSlide = 0;

  onPreviousClick() {
    const previous = this.currentSlide - 1;
    this.currentSlide = previous < 0 ? this.slides.length - 1 : previous;
    console.log("previous clicked, new current slide is: ", this.currentSlide);
  }

}

На основе currentSlide я хочу отобразить некоторую изменяющуюся информацию в родительском компоненте. Как я могу получить эту же переменную в родительском компоненте каждый раз, когда она меняется?

Answer 1

Вы можете использовать @output для передачи значения от child до parent компонента.

вот как вы должны это сделать:

  @Output('myOutputVal') myOutputVal = new EventEmitter(); 



onPreviousClick() {
    const previous = this.currentSlide - 1;
    this.currentSlide = previous < 0 ? this.slides.length - 1 : previous;
    console.log("previous clicked, new current slide is: ", this.currentSlide);
    this.myOutputVal.emit(this.currentSlide);
  }

затем в компоненте parent вы должны поймать значение emitted, как показано ниже:

в parent.html :

<app-child (myOutputVal)="readOutputValueEmitted($event)"></app-child>

в parent.ts файле:

readOutputValueEmitted(val){
    this.valueFromChild = val;
  }

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

демонстрация

Answer 2

В зависимости от того, где вы хотите определить переменную, вы можете использовать @Input или @Output из Angular директив. Вы также можете комбинировать их.

Ознакомьтесь с документацией здесь: https://angular.io/guide/template-syntax#inputs -выходы

---

@ Input

Использование Ввод для передачи переменной дочернему компоненту. Дочерний компонент может изменять переменную, и изменения обратно распространяются на родительский.

Дочерний компонент:

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
  @Input() item: string; // decorate the property with @Input()
}

Дочерний шаблон:

<p>
  Today's item: {{item}}
</p>

Родительский шаблон:

<app-item-detail [item]="currentItem"></app-item-detail>

Родительский компонент:

export class AppComponent {
  currentItem = 'Television';
}

---

@ Output

Output генерирует событие от дочернего элемента, на которое родитель может установить слушателя. Вы можете использовать его для отслеживания любых изменений в переменной.

Дочерний компонент

export class ItemOutputComponent {

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

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

Дочерний шаблон:

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>

Родительский шаблон:

<app-item-output (newItemEvent)="addItem($event)"></app-item-output>

Родительский компонент:

export class AppComponent {
  items = ['item1', 'item2', 'item3', 'item4'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}