Question

我正在学习Angular 2并且陷入设置子路线的困境。

我正在尝试构建简单的ToDo应用程序，无法设置添加新项目的路径。

这就是我想要获得的并且'todo / add'链接不起作用并继续给我404错误。

示例：

localhost / todo
本地主机/ TODO /添加

我在app.module.ts中添加了todo.module.ts。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from "./home/home.component";
import { AppComponent } from "./app.component";
import { PageNotFoundComponent } from "./not-found.component";
import { TodoListComponent } from "./todo/todo-list.component";

import { TodoModule } from "./todo/todo.module";

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'todo', component: TodoListComponent },
            { path: '**', component: PageNotFoundComponent }
        ],
            TodoModule)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TodoListComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

并在todo.module.ts中为todo / add

设置子路由

todo.module.ts

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

import { TodoListComponent } from './todo-list.component';
import { TodoAddComponent } from './todo-add.component';

@NgModule({
    imports: [
        RouterModule.forChild([
            { path: 'todo', component: TodoListComponent },
            { path: 'todo/add', component: TodoAddComponent }
            // tested these routes and not working too
            //{ path: 'add', component: TodoAddComponent }
            //{ path: 'todo/:id', component: TodoAddComponent }
        ])
    ],
    declarations: [
        TodoAddComponent,
        TodoListComponent
    ],
    providers: [

    ]
})
export class TodoModule { }

我测试了我在互联网上找到的3种可能的方法，所有这些方法都给我404错误（重定向到PageNotFoundComponent）

<h1>Todo List</h1>
<a [routerLink]="['/todo/add']">Add New Item with /</a><br />
<a [routerLink]="['/todo', 'add']">Add New Item</a><br />
<a [routerLink]="['add']">Add New Item</a>

它们呈现为/ todo / add，/ todo / add，/ add但是所有这些都是404错误。

你能帮我解决一下这个问题吗？

有时候，我对自己（或者可能是Angular2）非常沮丧，并且无法理解为什么学习/做简单的事情非常困难。

Answer 1

所有这些都给我404错误（重定向到PageNotFoundComponent）

使用您的配置，您永远不会从服务器获得实际的404，因为**路径会捕获之前未匹配的所有路径。 **＆＃34;技巧＆＃34;不是真正的404。

我认为您的问题只是匹配**路径之前匹配TodoModule中声明的路径。

如果您查看应用的整个路径列表，您（按此顺序）：

home - 来自AppModule

todo - 来自AppModule

** - 来自AppModule

todo - 来自TodoModule（为什么要宣布两次？）

todo/add - 来自TodoModule

**路径应该是最后的。在声明TodoModule的路线之前尝试导入AppModule ：

@NgModule({ imports: [ // First, TodoModule and its routes TodoModule, // Then, the other routes including the ** RouterModule.forRoot([ { path: 'home', component: HomeComponent }, { path: '**', component: PageNotFoundComponent } ]) ] })

（另外，如果您复制了实际代码，则导致TodoModule导入错误的位置：它应该是imports数组的成员;您将其放在RouterModule.forRoot()调用中。）

Angular 2：Child Routes无效

1 个答案: