角2：子ルートが機能しない

Question

私は角度2を学習していて、子ルートを設定することに固執しています。

シンプルなToDoアプリを構築しようとしていて、新しいアイテムを追加するルートを設定できませんでした。

これは私が取得しようとしているもので、 'todo/add'リンクが機能していないため、404エラーを表示し続けます。

例：

• ローカルホスト/ TODO
• ローカルホスト/ TODO /追加

Iはapp.module.tsにtodo.module.tsを添加しました。私がテストした

app.module.ts TODO /追加

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 { } 

ため

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内の子ルートを設定私がインターネット上で見つけた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

それらのすべては、あなたのような構成と私（PageNotFoundComponentにリダイレクト）404エラー

を与える**パスがすべてのパス避難所」をキャッチするので、サーバーから実際の404を得ることは決してないだろう以前に一致した。 **「トリックは、」私はあなたの問題はあなたがTodoModuleで宣言されたパスに一致する前**パスと一致するだけのことだと思う実際の404

ではありません。

アプリのパスのリスト全体を見れば、あなたは（この順序で）持っている：

• home - AppModule
• todoから - AppModule
• **から - AppModule
から
• todo - TodoModule（なぜ2回宣言しますか？
• todo/add）
から TodoModule

**パスからは最後に来るべきです。 AppModuleのルートを宣言前TodoModuleをインポートしてみてください。

@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()電話の中）