Как использовать выбранное выпадающее поле во всех компонентах

#angular

#angular

Вопрос:

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

Комментарии:

1. используйте глобальный объект (например => selectedOption = {} ) в компоненте. Когда вы измените тег выбора, вам будет предоставлен ключ для этой переменной. function change(key, value) {this.selectedOption[key] = value;} Теперь у вас есть доступ к переменной selectedOption globsl во всем шаблоне.

Ответ №1:

Здесь вы ищете Behavior Subject в своем сервисе.

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

Как только значение изменяется, оно становится доступным для всех подписанных на него компонентов.

Его значение можно изменить, вызвав next() для него метод.

Рабочий пример можно найти ЗДЕСЬ

Ответ №2:

для этого вы могли бы использовать service

 @Injectable({

   providedIn:"root" //Use this if you want to have shared on application level,otherwise provide in parent component level
    })
   export class SelectService{
       private _value:any;

   get value(){return this._value;
    }
    changeValue(value){
        this._value = value;
    }

  }
  

теперь вы можете вводить сервис везде, где хотите, и использовать его соответствующим образом

Ответ №3:

Удобным и масштабируемым подходом было бы использовать темы в вашем приложении. Субъект rxjs является как наблюдателем, так и наблюдаемым, т.Е. Вы можете использовать один и тот же субъект для групповой рассылки значения (которым вы хотите поделиться с другими компонентами), а также использовать его для подписки на любые изменения.

Тема поведения относится к темам в rxjs, которые могут пригодиться. Пример использования:

  • Создайте тему в сервисе :

    export class dataService { mySubject: new BehaviorSubject<string>('initialValue');}

В компоненте A подпишитесь на эту тему (создайте экземпляр DataService в своем конструкторе):

 this.service.mySubject.subscribe(data => { this.variableTOBeUpdated = data});
  

Аналогично в компоненте B подпишитесь на эту тему (создайте экземпляр DataService в своем конструкторе):
this.service.mySubject.subscribe(data => { this.OthervariableTOBeUpdated = data});

=> теперь предположим, что вы хотите обновить значение объекта, просто установите новое значение как: this.service.mySubject.next('updatedValue');

используя «далее», вы установили обновленное значение, и оно будет обновляться везде, где вы создали подписку, т. Е. В обоих компонентах переменная ( this.variableTOBeUpdated and this.OthervariableTOBeUpdated ) будет обновляться с последним значением.