Parent TS

export class CinemaProgrammeComponent implements OnInit {

  tasksList = [ 'cos', 'cos2' ];
}

Parent HTML

tam gdzie jest routerlink to chciałbym żeby działało na zasadzie ostatniej linii kodu tego HTMLA

<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 routerLink="/movie/{{kin.movie.id}}"  style="display:block; margin:3px; margin-top:10px;"><strong style="color:#e1cc89;"><legend>{{ kin.movie.title }}</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>

</div>

<app-movie [tasks]="tasksList"></app-movie>

ChildComponent TS

export class MovieComponent implements OnInit {
  @Input()
   tasks;
}

ChildComponent HTML

<p style="color:white;">movie works!</p>
<div *ngIf=""></div>
  <div *ngFor="let cos of tasks" style="color:white;">
    {{ cos }}
  </div>

<router-outlet></router-outlet>

APProutingmodule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CinemaProgrammeComponent } from './cinema-programme/cinema-programme.component';
import { MovieComponent } from './cinema-programme/movie/movie.component';



const routes: Routes = [
  { path: 'repertuar', component: CinemaProgrammeComponent ,
    children: [{path: ':id', component: MovieComponent, }]
},
  { path: 'movie/:id' , component: MovieComponent },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Czy ktoś ma jakieś pomysły jak te 2 opcje połączyć ze sobą >?