Question

我正在尝试学习angular2并做示例应用。

我想在我点击service1时它必须显示一些列表，当我点击其中一个时，我想重定向到子路径以编辑该名称。

当我点击service1时，它会抛出该错误：

当然之后没有任何作用

这是我的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

错误说找不到加载服务组件的主要插座。这意味着您缺少 <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>

儿童路线不起作用

1 个答案: