Angular - jak przesłać zmienną pobraną z http z 1 componentu do 2

pierwszy HTML component

<form class="" >
  <select name="cos" [(ngModel)]="selectedKinoId" searchable="Search here.." placeholder="Search..">
    <option value="" disabled selected >Wybierz kino</option>
    <option *ngFor="let kino of kina" [value]="kino.id"> {{ kino.name }} </option>
  </select>
  </form>

  <div *ngIf="selectedKinoId"  style="color:white; margin-left:12px;">

    <div *ngFor="let kin of getCinemaById(selectedKinoId).cinemaProgramme.programmeItems">
      <div class="img-repertuar">
      </div>

      <div class="one-repertuar">
        <span style="display:block; margin:3px; margin-top:10px;"><strong style="color:#e1cc89;"><legend><a routerlink="/movie">{{ kin.movie.title }}</a></legend></strong></span>
        <span style="display:block; margin:3px; margin-top:20px; ">{{ kin.movie.description }}</span>

        <span style="display:block; margin:3px; margin-top:110px; margin-left:-120px;">Czas:{{ kin.movie.length }}</span>
        <span style="display:block; margin:3px; margin-top:10px;">Reżyseria: {{ kin.movie.director }}</span>
      </div>
    </div>
  </div>

TS pierwszego componentu

import { Component, OnInit } from '@angular/core';
import { ProgrammeService } from '../CinemaProgramme';
import { CinemaProgramme , Cinema , ProgrammeItems , Movie} from './interfaceCinemaProgramme';


@Component({
  selector: 'app-cinema-programme',
  templateUrl: './cinema-programme.component.html',
  styleUrls: ['./cinema-programme.component.css']
})

export class CinemaProgrammeComponent implements OnInit {

  kina: Cinema[];
  selectedKinoId: '';

 getCinemas(): void {
   this.programmeService.getCinemas().
   subscribe(kina => this.kina = kina);
 }

  getCinemaById(id) {
   for (const kin of this.kina) {
     // tslint:disable-next-line: triple-equals
     if (kin.id == id) {
       return kin;
     }
   }
 }

 constructor(private programmeService: ProgrammeService) { }

 ngOnInit() {
   this.getCinemas();
 }
}

I to cała funkcja "getCinemaById()" w której zostaje pobrane i zapisane id danego kina ,by wykorzystać je do wyświetlenia w html konkretnych odpowiednich filmów z konkretnego repertuaru

I chce żeby to pobrane ID przesłać do nowego componentu
Jak to zrobić ?

import { Component, OnInit } from '@angular/core';
import { CinemaProgrammeComponent } from '../cinema-programme/cinema-programme.component';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {




  constructor() { }

  ngOnInit() {
  }

}

Możesz stworzyć np. serwis.

Dokładnie, stwórz serwis który będzie injectowany do jednego i drugiego komponentu. W nim możesz zrobić subject i w komponencie 1 przesłać przez niego jakąś wartość, a w drugim nasłuchiwać na zmianę,

adhed napisał(a):

Dokładnie, stwórz serwis który będzie injectowany do jednego i drugiego komponentu. W nim możesz zrobić subject i w komponencie 1 przesłać przez niego jakąś wartość, a w drugim nasłuchiwać na zmianę,

W TS 1 componentu ,Czy tak powinno wygladac wysylanie ?

sendMessage(id): void{
   this.messageService.sendMessage(this.selectedKinoId);
 }

 constructor(private messageService: MessageService , private programmeService: ProgrammeService , private activatedRoute: ActivatedRoute) { }

MessageService , czy odebranie tej "zmiennej" tak powinno wygladac ?

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { CinemaProgrammeComponent } from './cinema-programme/cinema-programme.component';
import { MovieComponent } from './movie/movie.component';

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  public subject = new Subject<any>();

  sendMessage(id) {
    this.subject.next({id});
  }

getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  constructor() { }
}

Component 2

import { ProgrammeService } from '../ProgrammeService';
import { MessageService } from '../message.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {

  constructor(private programmeService: ProgrammeService, private messageService: MessageService) {

    this.subscription = this.messageService.getMessage()
  .subscribe(message =>  this.id = message );

  }

  id: any[] = [];
  subscription: Subscription;

ngOnInit() { }
}

Czy to tak miało wyglądać ?? Jeśli tak to czy teraz tylko wystarczy polaczyc ten komponent z interface (dla filmów ) ? i działacw htmlu wyswietlanie ngifem ngforem ?

Jak juz spojrzalem to podziele sie kilkoma uwagami/radami, chcesz skorzystasz, nie to olej ;)

• zacznij pisac po angielsku - selectedKinoId
• wszystkie style wyrzuc do cssa, po to go tam masz
• nie nazywaj metody getCinemas jezeli nic nie zwraca (void) zmien np na loadCinemas
• staraj sie nie nazywac property klasy length -> Czas:{{ kin.movie.length }}
• lamiac wyrazenie przenosc kropke do nowej linijki i dodawaj wciecie
• getCinemaById(id) { return this.kina.find(p => p.id === id); i zamiast dodwac pragme po prostu uzyj ===

A te komponenty to jak sa osadzone wzgledem siebie? Jeden w drugim? Maja wspolnego rodzica?
W pierwszym przypadku w dziecku robisz @Input i bindujesz do niego, w drugim mozna sie posluzyc rodzicem, jezeli komponenty nie sa uniwersalne i przez niego przeslac (w zrodlowym dajesz eventEmitera, w parencie sie do niego podpinasz i lapiesz emitowane wartosci ustawiajac pole podbindowane do komponentu ktory id potrzebuje)