儿童路线不工作
问题描述:
我想学习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>
我的文件夹结构是:
答
错误说:它无法找到主要出口到装载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>
@PankajParkar感谢,但错误日志之前,我点击,例如' DEA'。它会记录我点击service1时的情况。我将'service1 /:id'改为':id',但结果相同 – gsiradze