Angular 2 - передать логическое "истина" от одного компонента к другому (не братьям и сестрам)

Question

На одном компоненте у меня есть кнопка, которая запускает функцию:

<button (click)="open Popup(); hideButton()"></button>

У меня, скажем так: buttonService что я должен использовать для связи между этими двумя компонентами.

А во втором компоненте (который не родитель-потомок связан с первым компонентом) у меня есть несколько кнопок, как это:

<button class="element1"></button>
<button [class.hiddenClass]="hideButt" class="element2"></button>
<button class="element3"></button>

Второй компонент - это всплывающее окно, которое открывается по нажатию той же кнопки от первого компонента, и в этот момент он также должен вызвать hideButton() функция для передачи логического "true" hideButt и скрыть кнопку на этом втором (всплывающем) компоненте. Как мне это сделать? С подпиской, Observable, EventEmitter?

Answer 1

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

Public buttonClick = new Subject ()

Затем в компоненте, из которого вы хотите отправить данные, обратиться к сервису и вызвать на нем next ()

This.myservice.buttonClick.next (true)

Тогда вы можете подписаться на свою тему из любого другого компонента

This.myservice.buttonClick.subscribe (data => data)

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

Кроме того, субъектом поведения является субъект, который будет излучать начальное значение

Надеюсь это поможет!

Answer 2

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

Вариант 1 между компонентами Вы будете делать это в компоненте, который вы хотите вызвать изменения

Импортировать

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

декларировать

 @Output()variableEvent: EventEmitter<any> = new EventEmitter();

Установите значение, которое вы хотите изменить

   public sendChange(){

 this.variableEvent.emit(value);

}

Добавьте это в шаблон компонента, который вы хотите получить значение

 <child (sendChange)="getValue($event)"></child>  

Добавьте эту строку в ваш component.ts

private getValue($event){
//Get the value
}     

Вариант 2 с использованием сервиса

  export class Service {
    public change: EventEmitter<any> = new EventEmitter();

    public setdata(value) {

        this.change.emit(value);
    }
}

Компонент, который устанавливает данные

export class SetDataComponent {

constructor(private service: Service) {}

private setData(){

this.service.setData(value);

}

}

Компонент, который будет получать данные

export class GetDataComponent {

constructor(private service: Service) {}

private getData()
{

this.service.change.subscribe(value => {
               let dataRecieve = value;

            });
}

}

Преимущество генератора событий заключается в том, что как только событие происходит, оно уведомляет все компоненты, на которые подписаны.