Как передать значение из одного компонента в другой (без @Input)

Question

У меня есть главная страница с несколькими кнопками, которые расположены в отдельных компонентах и ​​не имеют связи как родитель-потомок, но они должны перейти на одну страницу. Я должен передать значение из диапазона на новую страницу и установить его на входное значение, если оно пустое. Как я могу это сделать?

    public sendForm(): void {
        this.navigationService.navigateToNewCustomerPage();
}


<div class="slider-info">
                <p class="amount-title slider-info-text">How much do you need<span class="slider-question">?</span></p>
                <p class="slider-info-text"><span class="amount">{{amount|currency:'USD': 'symbol-narrow': '1.0'}}</span></p>
            </div>
            <mat-slider class="slider"
                                    [disabled]="sliderSettings.disabled"
                                    [invert]="sliderSettings.invert"
                                    [max]="sliderSettings.max"
                                    [min]="sliderSettings.min"
                                    [step]="sliderSettings.step"
                                    [thumbLabel]="sliderSettings.thumbLabel"
                                    [tickInterval]="sliderSettings.tickInterval"
                                    [(ngModel)]="sliderSettings.value"
                                    color="primary"
                                    (input)="onInputChange($event)">
            </mat-slider>
            <span class="slider-value slider-value-min">{{sliderSettings.min|currency:'USD': 'symbol-narrow': '1.0'}}</span>
            <span class="slider-value slider-value-max">{{sliderSettings.max|currency:'USD': 'symbol-narrow': '1.0'}}</span>
        </div>

Answer 1

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

Дочерний объект вызывает communicateUpdate метод для обновления значения.

Родитель (и любой другой заинтересованный компонент) подписывается на наблюдаемое.

Вот примерный пример.

import { Injectable } from "@angular/core";
import { Subject }    from 'rxjs';

@Injectable()
export class MyDummyService {
    constructor() {
    }
    private TheValueIWantMyParentToSee  = new Subject<any>();
    ObservableValue$ = this.TheValueIWantMyParentToSee.asObservable();

    communicateUpdatedValue(newValue:any){
        this.TheValueIWantMyParentToSee.next(newValue);
    }

}

Дочерний компонент вызывает communicationUpdatedValue для публикации sh значения, все, что подписано, получит обновленное значение. если ничего не подписано, оно просто исчезает

export class TheParentWhoSubscribes{
  childValue: any;
  constructor(private myDummyService: MyDummyService ) {
    myDummyService.ObservableValue$.subscribe(response => {
      this.childValue= response
    });
  }
}

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