//Маршруты
const appRoutes: Routes = [
    { path: '', redirectTo: '/details', pathMatch: 'full' },
    { path: 'details', component: DetailsPage },
    { path: 'details/:id', component: DetailPage },
    { path: 'about', component: AboutPage },
    { path: '**', component: NotFoundPage }
];
@NgModule({
    declarations: [
        AppComponent,
        DetailsPage,
        DetailPage,
        AboutPage,
        NotFoundPage,
        FilterListComponent,
        DetailListComponent
    ],
    imports: [
        RouterModule.forRoot(appRoutes),

    ],
    providers: [
        DetailService,

    ], 
    bootstrap: [AppComponent]
})
export class AppModule { }

<router-outlet></router-outlet>

@Component({
    selector: 'details-page',
    templateUrl: './details.html'
})
export class DetailsPage implements OnInit, OnDestroy {

    ngOnInit() {
        console.error("ngOnInit");
        this.loadData();
    }

    ngOnDestroy() {
        console.error("ngOnDestroy");
    }

    // Кнопка перехода на новую страницу
    goPage(id: any) {
        console.error(id);
        this.router.navigate(
            ['/details', id]
        );
    }

}

        <!--Фильтры-->
         <filter-list #filterList (onSearchButtonPressed)="onSearch($event)"></filter-list>                

        <!--Список-->
        <detail-list (onDetailPressed)=goPage($event)></detail-list>