Angular 2 Kind Routing

Question

Ich versuche, warum Route meines Kindes, um herauszufinden, ist nicht gefunden werden:

So habe ich einen Router, der etwa wie folgt aussieht:

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AboutComponent } from './about.component'; 
import { AboutTestComponent } from './about-test.component'; 
import { AboutSectionComponent } from './about-section.component'; 

const aboutRoutes: Routes = [ 
    { 
    path: 'about', 
    component: AboutSectionComponent, 
    children: [ 
     { 
     path: '', 
     component: AboutComponent 
     }, 
     { 
     path: 'test', 
     component: AboutTestComponent 
     } 
    ] 
    } 
]; 

export const aboutRouting: ModuleWithProviders = RouterModule.forChild(aboutRoutes); 

In meinen about-section.component.html, ich habe die folgende Aufschlags:

<!-- some layout stuff here --> 
<router-outlet></router-outlet> 
<!-- more layout stuff --> 
<button routerLink="/test"></button> <!-- I want to load the AboutTestComponent in the router outlet tags when I click on it --> 

ich möchte in der Lage, die AboutTestComponent im Router-Ausgang about-section.component.html zu laden, weil ich die HTML-Layout wiederverwenden möchten. Gerade jetzt, wenn ich auf der "Über" -Route lande, bekomme ich die erwartete AboutComponent, aber wenn ich auf den Knopf klicke, der versucht, zur "Test" -Route zu navigieren, bekomme ich einen 404. Gibt es eine Möglichkeit, den "Test" zu machen? Route erreichbar mit der Art, wie ich es gerade mache? Wenn nicht, was wäre ein guter Weg, dieses Problem anzugehen?

Answer 1

Ich denke, das ist nur möglich, wenn Sie about/test mit der folgenden Button navigieren:

<button routerLink="test"></button 

ich die / vor den test so ist es eine relativ Route gelöscht.

Wenn Sie jetzt auf die Schaltfläche klicken, wird es zu about/test navigieren und der Router lädt die AboutTestComponent in die <router-outlet> des übergeordneten Elements.

Sie können es auch mit einer absoluten Strecke lösen:

<button routerLink="/about/test"></button>