Смущает при передаче данных между компонентами

Question

Я новичок в Angular 6, я создаю проект, используя Angular 6. Я подхожу к проблеме при обмене данными.

Вот мой код:

1) Боковая панель компонентов:

selectedCategory(type:any) {
    this.loginService.categoryType = type; // need to pass this data
}

2) Список Comp:

export class ListPostsComponent implements OnInit {
    ngOnInit() {
        // here I need the data
    }
}

3) Сервис:

export class LoginService {
    categoryType:any;
}

Answer 1

В вашем сервисе сделайте categoryType a Subject и позвоните на next(), когда вам нужно передать данные другому компоненту:

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  private categoryType: Subject<any> = new Subject<any>();

  public categoryType$ = this.categoryType.asObservable();

  public sendData(data: any){
      this.categoryType.next(data);
  }
}

Теперь на боковой панели вашего компонента вам нужно ввестиservice LoginService и вызовите метод sendData:

constructor(private loginService: LoginService ){ }
selectedCategory(type:any) {
    this.loginService.sendData(type); 
}

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

export class ListPostsComponent implements OnInit {

    constructor(private loginService: LoginService ){ }
    ngOnInit() {
        this.loginService.categoryType$.subscribe((data) => {
           //use your data here
        });
    }
}

Вот рабочий пример вышеуказанного решения в Stackblitz: https://stackblitz.com/edit/angular-2sld4k?file=src%2Fapp%2Floginservice.service.ts