儿童路线不工作

Question

我想学习angular2和做示例应用程序。

我想要做到这一点，当我点击service1它必须显示一些列表，当我点击其中一个我想重定向到子路线编辑该名称。

当我点击到服务1，它抛出这个错误：

，没有什么之后，当然还有工作

这里是我的app.routing.ts

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

import { AppHomeComponent } from './app.home-component'; 

import { ServicesComponent } from './service1/services.component'; 
import { Service2Component } from './service2/service2.component'; 
import { ServiceDetailComponent } from './service1/service-detail.component'; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'apphomecomponent', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'apphomecomponent', 
     component: AppHomeComponent 
    }, 
    { 
     path: 'service1', 
     component: ServicesComponent, 
     children: [ 
      { 
       path: '', 
       component: ServicesComponent 
      }, 
      { 
       path: 'service1/:id', 
       component: ServiceDetailComponent 
      } 

     ] 
    }, 

    { 
     path: 'service2', 
     component: Service2Component 
    } 
]; 

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

service-detail.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ServicesService } from './services.service'; 
import { ActivatedRoute } from '@angular/router'; 


@Component({ 
    selector: 'service-detail', 
    template: '{{service.name}}' 
}) 

export class ServiceDetailComponent implements OnInit { 
    sub: any; 
    service: any; 


    constructor(private servicesService: ServicesService, private route: ActivatedRoute) { 

    } 

    ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      let id = +params['id']; 
      this.service = this.servicesService.getServiceById(id); 
     }); 
    } 
} 

和services.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ServicesService } from './services.service'; 
import { Service } from './service'; 
import { Route } from '@angular/router'; 


@Component({ 
    selector: 'services', 
    templateUrl: 'app/service1/services.html', 
    providers: [ServicesService] 
}) 

export class ServicesComponent implements OnInit { 
    services: Service[]; 

    constructor(private servicesService: ServicesService) { 

    } 

    ngOnInit() { 
     this.services = this.servicesService.getServices(); 
    } 
} 

有什么不对？或我可以在哪里找到解决方案？

services.html样子：

<ul> 
    <li *ngFor="let service of services"> 
     <a [routerLink]="['/service', service.id]">{{service.name}}</a> 
    </li> 
    <router-outlet></router-outlet> 
</ul> 

我的文件夹结构是：

Answer 1

错误说：它无法找到主要出口到装载servicescomponent。这意味着您错过了<router-outlet>。

你在哪里展示的产品清单，低于只是把<router-outlet></router-outlet>，它会开始工作，因为它需要通过路由器来加载servicescomponent。

也改变路线的指引下，

{ 
    path: 'service1', 
    component: ServicesComponent, 
    children: [ 
     { 
      path: ':id', 
      component: ServiceDetailComponent 
     } 

    ] 
}, 

您还需要改变，

<a [routerLink]="['/service', service.id]">{{service.name}}</a> 

到

<a [routerLink]="['/service1', service.id]">{{service.name}}</a>