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

Question

Я хочу передать значение из списка выбора - ListComponentComponent компоненту-брату - DisplayComponentComponent и отобразить значение в шаблоне DisplayComponentComponent.Я хочу использовать общий сервис для этого.Я создал сервис, и я передаю значение при изменении.Однако, когда я хочу console.log это значение в моем компоненте дисплея, я ничего не вижу.Вот мой код.

Дисплейный компонент

export class DisplayComponentComponent implements OnInit {
  val: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(result => {
        this.val = result
      });
  }
}

Список

export class ListComponentComponent implements OnInit {
  list: any;
  selected: string;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.list = [
      {
        text: 'test1',
        value: 'test1'
      },
      {
        text: 'test2',
        value: 'test2'
      },
      {
        text: 'test3',
        value: 'test3'
      }
    ]
    this.selected = this.list[0].value;
    this.myService.update(this.selected);
  }
  getSelected(val) {
    this.selected = val;
    this.myService.update(this.selected);
  }
}

Сервис

@Injectable()
export class MyServiceService {
  public source = new Subject<any>();
  val = this.source.asObservable();

  update(input: any) {
     this.source.next(input);
  }
  constructor() { }

}

Здесь должно отображаться значение:

<p>
  {{result}}
</p>

https://stackblitz.com/edit/angular-7lhn9j?file=src%2Fapp%2Fmy-service.service.ts

Answer 1

Если вы показываете значения загрузки приложения, вам нужно изменить тему на BehaviorSubject

    private _onChanged: BehaviorSubject<any> = new BehaviorSubject({});
    public val= this._onChanged.asObservable(); 

  update(input: any) { 
     this._onChanged.next(input);
  }
  constructor() { }

Демо

Answer 2

Я нашел маленькую вещь в вашем коде.вместо ниже

<p>
  {{result}}
</p>

вы должны использовать

 <p>
   {{val}}
 </p>

Answer 3

Значение обновляется, все правильно.

val: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(result => {
      console.log(result);
        this.val = result
      });
  }

в используемом вами HTML {{result}} нет такой переменной, вместо нее используйте {{val}} или измените имя переменной

result: any;
  constructor(private myService: MyServiceService) { }

  ngOnInit() {
    this.myService.val.subscribe(res => {
      console.log(result);
        this.result = res
      });
  }

Answer 4

Вы должны связать правильное значение в вашей display-component.component.html части:

<p>
  {{val}} <!--not {{result}}-->
</p>