이렇게하는 데 문제가 없을 것이라고 생각합니다. 라우팅 파일과 경로 링크를 수정하면됩니다. 여기
코드
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
export const routes: Routes = [
{ path: '', redirectTo: 'component-one', pathMatch: 'full' },
{ path: 'component-one', component: ComponentOne },
{ path: ':id/dashboard', component: ComponentTwo }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(routes);
app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app',
template: `
<nav>
<a [routerLink]="['/component-one']">Component One</a>
<a [routerLink]="[123,'dashboard']">Component Two (id: 123)</a> <-- replace 123 with city name
</nav>
<div style="color: green; margin-top: 1rem;">Outlet:</div>
<div style="border: 2px solid green; padding: 1rem;">
<router-outlet></router-outlet>
</div>
`
})
export class AppComponent {
}
성분 two.ts이다
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'component-two',
template: 'Component Two with route param <b><code>ID: {{ id }}</code></b>'
})
export default class ComponentTwo {
private id;
constructor(private route: ActivatedRoute) {}
private ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id']; // use (+) converts string 'id' to a number other wise use params['id'] directly
});
}
private ngOnDestroy() {
this.sub.unsubscribe();
}
}
여기에 근무중인 plnkr은 https://plnkr.co/edit/Purfk2msPE1XcZgjowvd?p=preview
입니다.