儿童路线不能显示在角

Question

我想创建子菜单，这是我的主要路线和子输出通过辅助命名插座子。但是，每当我尝试让应用程序路由到子路由时，我都会收到错误Error: Cannot match any routes. URL Segment: 'apps/subroute'。

apps.component.html

<nav> 
    <ul> 
    <!-- Create navigation --> 
    <li *ngFor="let routing of subRouteList" 
    routerLinkActive="active" 
    (click)="subRoute(routing.name)"> 
     <a> 
     {{routing.name}} 
     </a> 
    </li> 
    </ul> 
</nav> 
<br> 
<h2>Applications by <em>Peter David Carter</em></h2> 
<router-outlet name="appCategories"></router-outlet> 
<p> 
    This is the section of the page where I'll be putting 
    some applications I've been working on. 
    Should be a few here within the next couple of days, 
    but for now I've including a link to a basic Skype 
    bot I created for an old project. If you're interested 
    in talking to <a href="https://join.skype.com/bot/1622b401-3752-465b-99d4-72aab7df6842">Emile</a> 
    click his name to add him as your Skype contact... 
</p> 

apps.component.ts

import { Component, OnInit, HostBinding } from '@angular/core'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 
import { RouterModule, Routes } from '@angular/router'; 
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/switchMap'; 

import { AnimationsComponent } from './animations/animations.component'; 
import { BotsComponent } from './bots/bots.component'; 
import { MiscComponent } from './misc/misc.component'; 
import { VisualisationsComponent } from './visualisations/visualisations.component'; 

import { Routings, RoutingsService } from '../routings/routings.service'; 

@Component({ 
    selector: 'app-apps', 
    templateUrl: './apps.component.html', 
    styleUrls: ['../submenus/submenus.css'] 
}) 
export class AppsComponent implements OnInit { 

    subRouteList: Routings = [{name: 'animations', animState: 'small'}, 
          {name: 'bots', animState: 'small'}, 
          {name: 'visualisations', animState: 'small'}, 
          {name: 'misc', animState: 'small'} 
          ]; 

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

    subRoute(route: string): void { 
    console.log('entered subroute'); 
    this.router.navigate([route], { relativeTo: this.route }); 
    } 

    ngOnInit() { 

    } 

} 

app.routing-module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { AboutComponent } from '../about/about.component'; 
import { BlogComponent } from '../blog/blog.component'; 
import { AppsComponent } from '../apps/apps.component'; 
import { ApiComponent } from '../api/api.component'; 
import { ProfileComponent } from '../users/profile.component'; 

import { AnimationsComponent } from '../apps/animations/animations.component'; 
import { BotsComponent } from '../apps/bots/bots.component'; 
import { VisualisationsComponent } from '../apps/visualisations/visualisations.component'; 
import { MiscComponent } from '../apps/misc/misc.component'; 

const routings: Routes = [ 
    { path: '', redirectTo: '/about', pathMatch: 'full' }, 
    { path: 'about',  component: AboutComponent }, 
    { path: 'blog',  component: BlogComponent }, 
    { path: 'apps', 
    component: AppsComponent, 
    children: [ 
     { 
     path: 'animations', 
     component: AnimationsComponent, 
     outlet: 'appCategories' 
     }, 
     { 
     path: 'bots', 
     component: BotsComponent, 
     outlet: 'appCategories' 
     }, 
     { 
     path: 'visualisations', 
     component: VisualisationsComponent, 
     outlet: 'appCategories' 
     }, 
     { 
     path: 'misc', 
     component: MiscComponent, 
     outlet: 'appCategories' 
     }, 
    ]}, 
    { path: 'api',  component: ApiComponent }, 
    { path: 'profile', component: ProfileComponent } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routings, { enableTracing: true }) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

由于这些路线已被定义为apps路线的子路线，因此我认为apps/subroute路线现在应该是有效的。我需要做一些不同的或额外的事情才能使事情正常工作吗？

Answer 1

我想出了一种方法来实现它的工作。我现在有：

<nav> 
    <ul> 
    <!-- Create navigation --> 
    <li *ngFor="let routing of subRouteList" 
    routerLinkActive="active" 
    [routerLink]="[{ outlets: { appCategories: routing.name } }]"> 
     <a> 
     {{routing.name}} 
     </a> 
    </li> 
    </ul> 
</nav> 

在视图中，并没有使用我在控制器中的路由代码。

它看起来router.navigate代码是以这种形式生成路由：apps/animations但通过命名插座输出的子路由的正确格式是/apps/(appCategories:animations)。