Передача данных из дочернего компонента в appcomponent без циклической зависимости

Question

Я разделил свое приложение angular на несколько библиотек.

Мой шаблон компонента приложения будет выглядеть как

<app-header></app-header>
<router-outlet><router-outlet>
<app-footer></app-footer>

Также я настроил несколько маршрутов, например,

/ home - домашний компонент
/ users / user - пользовательский компонент (как дочерний компонент внутри пользовательского компонента)

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

Я знаю, что это может быть достигнуто с помощью службы или магазина.

Но моя проблема в том, что заголовок, главная, пользователь все находятся в разных библиотеках, из-за этого я получаю циркуляр dependency.

Итак, сейчас я пытаюсь передать данные из дома / пользователя в appcomponent, а затем передать данные из appcomponent в заголовок, используя @Output, @Input и emitter. Но я не могу передать данные на <router-outlet>

Пожалуйста, помогите мне решить эту ситуацию

Answer 1

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

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Допустим, у вас есть кнопка на вашем домашнем компоненте, вы хотите показать это сообщение в методе onInit ваших компонентов. Затем назовите его так:

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class HomeComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}