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ą >?