Angular 2 - передать булево «true» от одного компонента к другому (не братьям и сестрам) - PullRequest
Новая
       11

Angular 2 - передать булево «true» от одного компонента к другому (не братьям и сестрам)

0 голосов
/ 02 мая 2018

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

<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?

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

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

Public buttonClick = new Subject ()

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

This.myservice.buttonClick.next (true)

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

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

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

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

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

0 голосов
/ 02 мая 2018

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

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

Импорт 

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

Declare 

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

            });
}

}

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

...