Angular 2 Router Navigieren Komponentenpfad und nicht mit vollständigem Pfad

Question

Ich habe Routen und Kind Routen mit der folgenden Struktur

export const routes: Routes = [ 
    { path: '', redirectTo: 'component-one', pathMatch: 'full' }, 
    { path: 'component-one', component: ComponentOne }, 
    { path: 'component-two/:id', component: ComponentTwo, 
    children: [ 
     { path: '', redirectTo: 'child-one', pathMatch: 'full' }, 
     { path: 'child-one', component: ChildOne }, 
     { path: 'child-two', component: ChildTwo } 
    ] 
    } 
]; 

Jetzt Wenn ich childTwo das Kind Route navigieren möge so innerhalb componentTwo ich folgendes habe.

<a [routerLink]="['child-two']"> 

Und das funktioniert.

Aber was ist, wenn ich möchte, dass eine Schaltfläche dasselbe anstelle einer Verknüpfung tut.

So habe ich versucht, ein alternatives Verfahren zur Herstellung einer Taste, als

<button (click)="toClicked()">Two</button> 

folgt dann die folgenden Click-Handler

toClicked(){ 
    this.router.navigate(['component-two','child-two']); 
} 

Ich habe

Wie Sie Wenn ich den Link sehen kann ich nur noch zu haben geben Sie die untergeordnete Route childTwo, aber mit einer Schaltfläche mit einem Click-Handler muss ich die übergeordnete Komponente component-two sowie das Kind childTwo

bereitstellen

Kann ich navigieren, indem ich die untergeordnete Komponente mit einem Klick-Handler übergebe?

Answer 1

Sie können es wie folgt tun:

constructor(private route: ActivatedRoute, private router: Router) { } 

toClicked(){ 
    this.router.navigate(['./child-two'], {relativeTo: this.route}); 
} 

Werfen Sie einen Blick auf die relative routes chapter in the docs für weitere Details.