Angular 6 передача данных между двумя несвязанными компонентами

Без использования каких-либо других библиотек, Angular определяет несколько способов взаимодействия компонентов друг с другом. Документация

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

1. Попросите общий родительский компонент передать данные обоим дочерним элементам
2. Храните данные в общем сервисе

Основываясь на показанном вами коде, я считаю, что №2 - ваш лучший вариант. Итак, вы можете добавить свойство к вашему CourseService:

public selectedCourse: ICourse;

Затем вы можете получить к нему доступ в обоих компонентах:

this.courseService.selectedCourse;

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

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

Если у вас есть идентификатор на вашем пути, попробуйте это

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router, Routes, NavigationEnd } from '@angular/router';
import { MatSidenavModule } from '@angular/material/sidenav';

import { ICourse } from '../course';
import { CourseService } from '../course.service';

@Component({
    selector: 'lg-course-play-course-play',
    templateUrl: './course-play.component.html',
    styleUrls: ['./course-play.component.sass']
})

export class CoursePlayComponent implements OnInit {
    courseId: number;
    errorMessage: string;
    private sub: any;

    constructor(private courseService: CourseService,
        private route: ActivatedRoute,
        private router: Router) {

    }

    ngOnInit() {
        const id = +this.route.snapshot.paramMap.get('id');
        this.getCourse(id);
    }

    // Get course detail by id
    getCourse(id: number) {
        this.courseService.getCourse(id).subscribe(
        course => this.course = course,
        error  => this.errorMessage = <any>error);
    }

    onBack(): void {
        this.router.navigate(['/courses/:id']);
    }

}

    //inside service
    export class LocalService {
      obj: BehaviorSubject<any>;
      constructor() {
        this.obj = new BehaviorSubject(this.obj);
      }
      loadData(selectedObj: any): void {
        this.obj.next(selectedObj);
      }
    }

    //inside component1
    const data = {
          object_id: 7444,
          name: 'Relaince'
    };
    this.localService.nextCount(data);

    //inside component2 - subscribe to obj
    this.localService.obj.subscribe(data => {
         this.selectedObj = data;
    });

   // inside component2 html
    <div class = "pl-20 color-black font-18 ml-auto">
                    {{selectedObj?.name}}  
         <span><b>{{selectedObj?.object_id}}</b></span>
    </div>

Когда дело доходит до несвязанных компонентов, мы можем воспользоваться Шаблон посредника.

With the mediator pattern, communication between objects is encapsulated within a mediator object. Objects no longer communicate directly with each other, but instead communicate through the mediator.

Я видел, как термин «несвязанные компоненты» используется для описания компонентов с общим родительским элементом или без него.

Если есть общий родитель (братья и сестры), то родительский элемент может использоваться как посредник. Допустим, у нас есть следующая иерархия компонентов

-Component A
--Component B
--Component C

и мы хотим передать данные от Компонента B к Компоненту C. Способ, которым это будет работать, - это передать данные от Дочернего к Родителю (Компонент B к Компоненту A), а затем передать данные от Родителя к Дочернему (Компонент A к Компоненту B).

Итак, в компоненте B, использующем привязку вывода, с декоратором @Output мы генерируем событие (EventEmitter), а компонент A получает полезную нагрузку этого события. Затем компонент A вызывает обработчик событий, а компонент C получает данные с помощью декоратора @Input.

Иначе (если есть нет общего родителя), мы можем использовать сервис. В этом случае просто внедрите службу в компоненты и подпишитесь на ее события.

Вы можете использовать статические атрибуты (или методы) для обмена данными между несколькими компонентами. Ниже приведен пример:

компонент заголовка:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
   public static headerTitle: string = "hello world";
}

компонент нижнего колонтитула:

import { HeaderComponent } from '../header/header.component';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
   public footerText: string = HeaderComponent.headerTitle;
}

Хотя использование этого метода вместо создания службы значительно снижает накладные расходы, более сложная логика не рекомендуется. Если логика станет более сложной, вы можете столкнуться с предупреждениями о циклических зависимостях и проблемами связи. Примером этого является то, что для заголовка нужны данные из нижнего колонтитула и наоборот. В случае сложной логики используйте сервис с BehaviorSubject rxjs. Службы должны быть самодостаточными и не должны сильно зависеть от других служб или компонентов. Это исключит возможность появления всех предупреждений о циклической зависимости.