兒童路線不工作

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>